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

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

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.

...

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

...

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

...

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

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

.....

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">Backdrop 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;
$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-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 WAI-ARIA modale dialogdesignmønster . Gjør dette på egen risiko.

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.offcanvas`eller `hidden.bs.offcanvas`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.offcanvas`hendelsen 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.offcanvas`hendelsen 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 `show`instansmetoden 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 `hide`metoden 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...
})

Offcanvas

Hvordan det fungerer

Eksempler

Offcanvas komponenter

Offcanvas

Live demo

Offcanvas

Plassering

Offcanvas topp

Offcanvas høyre

Offcanvas bunn

Bakteppe

Farget med rulling

Offcanvas med bakteppe

Bakteppe med rulling

tilgjengelighet

Sass

Variabler

Bruk

Via dataattributter

Veksle

Avskjedige

Via JavaScript

Alternativer

Metoder

Asynkrone metoder og overganger

arrangementer