Gå til hovedinnhold Hopp til dokumentnavigering
Check
in English

Offcanvas

Bygg skjulte sidefelt i prosjektet ditt for navigering, handlekurver og mer med noen få klasser og JavaScript-pluginen vår.

På denne siden

Hvordan det fungerer

Offcanvas er en sidefeltkomponent som kan veksles via JavaScript for å vises fra venstre, høyre, øvre eller nedre kant av visningsporten. Knapper eller ankere brukes som utløsere som er knyttet til spesifikke elementer du veksler på, og dataattributter brukes til å påkalle JavaScript.

  • Offcanvas deler noe av den samme JavaScript-koden som modaler. Konseptuelt er de ganske like, men de er separate plugins.
  • På samme måte er noen Sass -kildevariabler for offcanvas stiler og dimensjoner arvet fra modalens variabler.
  • Når det vises, inkluderer offcanvas et standard bakteppe som kan klikkes for å skjule offcanvas.
  • I likhet med modaler kan bare ett offcanvas vises om gangen.

Vær oppmerksom! Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke margineller translatepå et .offcanvaselement. Bruk i stedet klassen som et uavhengig innpakningselement.

Animasjonseffekten til denne komponenten er avhengig av prefers-reduced-motionmediesøket. Se delen for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .

Eksempler

Offcanvas komponenter

Nedenfor er et offcanvas-eksempel som vises som standard (via .showpå .offcanvas). Offcanvas inkluderer støtte for en header med en lukkeknapp og en valgfri kroppsklasse for noen initialer padding. Vi foreslår at du inkluderer offcanvas-overskrifter med avvisningshandlinger når det er mulig, eller oppgir en eksplisitt avvisningshandling.

Offcanvas
Innhold for offcanvas går her. Du kan plassere omtrent hvilken som helst Bootstrap-komponent eller tilpassede elementer her.
html 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

Live demo

Bruk knappene nedenfor for å vise og skjule et offcanvas-element via JavaScript som slår .showklassen på et element med .offcanvasklassen.

  • .offcanvasskjuler innhold (standard)
  • .offcanvas.showviser innhold

Du kan bruke en lenke med hrefattributtet, eller en knapp med data-bs-targetattributtet. I begge tilfeller er det data-bs-toggle="offcanvas"nødvendig.

Koble til href
Offcanvas
Noe tekst som plassholder. I det virkelige liv kan du ha elementene du har valgt. Som tekst, bilder, lister osv.
html 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

Kroppsrulling

Rulling av <body>elementet er deaktivert når et offcanvas og dets bakgrunn er synlig. Bruk data-bs-scrollattributtet for å aktivere <body>rulling.

Offcanvas med kroppsrulling

Prøv å bla gjennom resten av siden for å se dette alternativet i aksjon.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Kroppsrulling og bakteppe

Du kan også aktivere <body>rulling med et synlig bakteppe.

Bakteppe med rulling

Prøv å bla gjennom resten av siden for å se dette alternativet i aksjon.

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

Statisk bakteppe

Når bakteppet er satt til statisk, lukkes ikke offcanvas når du klikker utenfor det.

Offcanvas
Jeg vil ikke lukke hvis du klikker utenfor meg.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Mørk offcanvas

Lagt til i v5.2.0

Endre utseendet til offcanvaser med verktøy for bedre å matche dem til forskjellige kontekster som mørke navbarer. Her legger vi .text-bg-darktil .offcanvasog .btn-close-whitetil .btn-closefor riktig styling med en mørk offcanvas. Hvis du har rullegardinmenyene i, bør du vurdere å legge .dropdown-menu-darktil i .dropdown-menu.

Offcanvas

Plasser offcanvas-innhold her.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Mottakelig

Lagt til i v5.2.0

Responsive offcanvas-klasser skjuler innhold utenfor visningsporten fra et spesifisert bruddpunkt og nedover. Over dette bruddpunktet vil innholdet i oppføre seg som vanlig. Skjuler for eksempel .offcanvas-lginnhold i et offcanvas under lgbruddpunktet, men viser innholdet over lgbruddpunktet.

Endre størrelsen på nettleseren din for å vise den responsive offcanvas-bryteren.
Responsiv offcanvas

Dette er innhold i en .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Responsive offcanvas-klasser er tilgjengelige på tvers for hvert bruddpunkt.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Plassering

Det er ingen standardplassering for offcanvas-komponenter, så du må legge til en av modifikatorklassene nedenfor.

  • .offcanvas-startplasserer offcanvas til venstre for visningsporten (vist over)
  • .offcanvas-endplasserer offcanvas til høyre for visningsporten
  • .offcanvas-topplasserer offcanvas på toppen av viewporten
  • .offcanvas-bottomplasserer offcanvas på bunnen av viewporten

Prøv de øverste, høyre og nederste eksemplene nedenfor.

Offcanvas topp
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas høyre
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas bunn
...
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

tilgjengelighet

Siden offcanvas-panelet konseptuelt er en modal dialog, sørg for å legge til aria-labelledby="..."– som refererer til offcanvas-tittelen – til .offcanvas. Merk at du ikke trenger å legge til role="dialog"siden vi allerede legger det til via JavaScript.

CSS

Variabler

Lagt til i v5.2.0

Som en del av Bootstraps utviklende tilnærming til CSS-variabler, bruker offcanvas nå lokale CSS-variabler på .offcanvasfor forbedret sanntidstilpasning. Verdier for CSS-variablene settes via Sass, så Sass-tilpasning støttes fortsatt også.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass variabler

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Bruk

Offcanvas-pluginen bruker noen få klasser og attributter for å håndtere tunge løft:

  • .offcanvasskjuler innholdet
  • .offcanvas.showviser innholdet
  • .offcanvas-startskjuler offcanvas til venstre
  • .offcanvas-endskjuler offcanvas til høyre
  • .offcanvas-topskjuler offcanvas på toppen
  • .offcanvas-bottomskjuler offcanvas på bunnen

Legg til en avvis-knapp med data-bs-dismiss="offcanvas"attributtet, som utløser JavaScript-funksjonaliteten. Sørg for å bruke <button>elementet med det for riktig oppførsel på alle enheter.

Via dataattributter

Veksle

Legg til data-bs-toggle="offcanvas"og et data-bs-targeteller hreftil elementet for automatisk å tildele kontroll over ett offcanvas-element. data-bs-targetAttributtet godtar en CSS-velger å bruke offcanvas på . Sørg for å legge klassen offcanvastil offcanvas-elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show.

Avskjedige

Avvisning kan oppnås med dataattributtet på en knapp innenfor offcanvas som vist nedenfor:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

eller på en knapp utenfor offcanvas ved å bruke data-bs-targetsom vist nedenfor:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Selv om begge måter å avvise et offcanvas støttes på, husk at avvisning fra utenfor et offcanvas ikke samsvarer med ARIA Authoring Practices Guide-dialog (modalt) mønsteret . Gjør dette på egen risiko.

Via JavaScript

Aktiver manuelt med:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Alternativer

Siden alternativer kan sendes via dataattributter eller JavaScript, kan du legge til et alternativnavn til data-bs-, som i data-bs-animation="{value}". Sørg for å endre sakstypen for alternativnavnet fra " camelCase " til " kebab-case " når du sender alternativene via dataattributter. Bruk for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 støtter alle komponenter et eksperimentelt reservert dataattributt data-bs-configsom kan inneholde enkel komponentkonfigurasjon som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleverdien være 456og de separate dataattributtene vil overstyre verdier gitt på data-bs-config. I tillegg kan eksisterende dataattributter inneholde JSON-verdier som data-bs-delay='{"show":0,"hide":150}'.

Navn Type Misligholde Beskrivelse
backdrop boolsk eller strengenstatic true Påfør et bakteppe på kroppen mens offcanvas er åpent. Alternativt, spesifiser staticfor et bakteppe som ikke lukker offcanvas når du klikker.
keyboard boolsk true Lukker offcanvas når escape-tasten trykkes.
scroll boolsk false Tillat kroppsrulling mens offcanvas er åpent.

Metoder

Asynkrone metoder og overganger

Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .

Se vår JavaScript-dokumentasjon for mer informasjon .

Aktiverer innholdet ditt som et offcanvas-element. Godtar et valgfritt alternativ object.

Du kan lage en offcanvas-forekomst med konstruktøren, for eksempel:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metode Beskrivelse
getInstance Statisk metode som lar deg få offcanvas-forekomsten assosiert med et DOM-element.
getOrCreateInstance Statisk metode som lar deg få offcanvas-forekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert.
hide Skjuler et offcanvas-element. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt skjult (dvs. før hidden.bs.offcanvashendelsen inntreffer).
show Viser et offcanvas-element. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt vist (dvs. før shown.bs.offcanvashendelsen inntreffer).
toggle Veksler et offcanvas-element til vist eller skjult. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.offcanvaseller hidden.bs.offcanvasinntreffer).

arrangementer

Bootstraps offcanvas-klasse viser noen få hendelser for å koble til offcanvas-funksjonalitet.

Hendelsestype Beskrivelse
hide.bs.offcanvas Denne hendelsen utløses umiddelbart når hidemetoden har blitt kalt.
hidden.bs.offcanvas Denne hendelsen utløses når et offcanvas-element er skjult for brukeren (vil vente på at CSS-overganger er fullført).
hidePrevented.bs.offcanvas Denne hendelsen utløses når offcanvas vises, bakteppet er staticog et klikk utenfor offcanvas utføres. Hendelsen utløses også når escape-tasten trykkes og keyboardalternativet er satt til false.
show.bs.offcanvas Denne hendelsen utløses umiddelbart når showinstansmetoden kalles.
shown.bs.offcanvas Denne hendelsen utløses når et offcanvas-element er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})