Gå til hovedinnhold Hopp til dokumentnavigering
in English

Offcanvas

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

Hvordan det fungerer

Offcanvas er en sidefeltkomponent som kan veksles via JavaScript for å vises fra venstre, høyre eller nederste 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 .show.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.
<div class="offcanvas offcanvas-start" 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 text-reset" 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.
<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

Plassering

Det er ingen standardplassering for offcanvas-komponenter, så du må legge til en av modifikasjonsklassene 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
...
<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas høyre
...
<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas bunn
...
<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Bakteppe

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

Farget med rulling

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

Offcanvas med bakteppe

.....

Bakteppet med rulling

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>

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.

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;

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-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

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.

Via JavaScript

Aktiver manuelt med:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Alternativer

Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-, som i data-bs-backdrop="".

Navn Type Misligholde Beskrivelse
backdrop boolsk true Påfør et bakteppe på kroppen mens offcanvas er åpent
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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metode Beskrivelse
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).
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).
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).
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

arrangementer

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

Hendelsestype Beskrivelse
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).
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).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})