Offcanvas

Byg skjulte sidebjælker ind i dit projekt til navigation, indkøbskurve og mere med nogle få klasser og vores JavaScript-plugin.

På denne side

Hvordan det virker

Offcanvas er en sidebar-komponent, der kan skiftes via JavaScript, så den vises fra venstre, højre eller nederste kant af visningsporten. Knapper eller ankre bruges som udløsere, der er knyttet til specifikke elementer, du skifter til, og dataattributter bruges til at kalde vores JavaScript.

Offcanvas deler noget af den samme JavaScript-kode som modals. Konceptuelt er de ret ens, men de er separate plugins.
På samme måde er nogle Sass -kildevariabler for offcanvas' stilarter og dimensioner arvet fra modalens variabler.
Når det vises, inkluderer offcanvas en standardbaggrund, der kan klikkes på for at skjule offcanvas.
I lighed med modals kan kun én offcanvas vises ad gangen.

Heads up! I betragtning af hvordan CSS håndterer animationer, kan du ikke bruge margineller translatepå et .offcanvaselement. Brug i stedet klassen som et selvstændigt indpakningselement.

Animationseffekten af denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Eksempler

Offcanvas komponenter

Nedenfor er et offcanvas-eksempel, der vises som standard (via .showon .offcanvas). Offcanvas inkluderer understøttelse af en header med en lukkeknap og en valgfri kropsklasse for nogle initialer padding. Vi foreslår, at du inkluderer offcanvas-headers med afvisningshandlinger, når det er muligt, eller angiver en eksplicit afvisningshandling.

Indhold til offcanvas findes her. Du kan placere næsten enhver Bootstrap-komponent eller brugerdefinerede 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

Brug knapperne nedenfor til at vise og skjule et offcanvas-element via JavaScript, der skifter .showklassen til et element med .offcanvasklassen.

.offcanvasskjuler indhold (standard)
.offcanvas.showviser indhold

Du kan bruge et link med hrefattributten eller en knap med data-bs-targetattributten. I begge tilfælde er det data-bs-toggle="offcanvas"påkrævet.

Link til href

Noget tekst som pladsholder. I det virkelige liv kan du få de elementer, du har valgt. Som tekst, billeder, 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>

Placering

Der er ingen standardplacering for offcanvas-komponenter, så du skal tilføje en af modifikatorklasserne nedenfor;

.offcanvas-startplacerer offcanvas til venstre for viewporten (vist ovenfor)
.offcanvas-endplacerer offcanvas til højre for viewporten
.offcanvas-topplacerer offcanvas på toppen af viewporten
.offcanvas-bottomplacerer offcanvas i bunden af viewporten

Prøv de øverste, højre og nederste eksempler 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>

Bagtæppe

Rulning af <body>elementet er deaktiveret, når et offcanvas og dets baggrund er synligt. Brug data-bs-scrollattributten til at skifte mellem <body>rulning og data-bs-backdroptil at skifte mellem baggrunden.

Prøv at rulle resten af siden for at se denne mulighed i aktion.

.....

Prøv at rulle resten af siden for at se denne mulighed i aktion.

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

Tilgængelighed

Da offcanvas-panelet konceptuelt er en modal dialog, skal du sørge for at tilføje – med aria-labelledby="..."henvisning til offcanvas-titlen – til .offcanvas. Bemærk, at du ikke behøver at tilføje, role="dialog"da vi allerede tilføjer det 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;

Brug

Offcanvas-plugin'et bruger et par klasser og attributter til at håndtere de tunge løft:

.offcanvasskjuler indholdet
.offcanvas.showviser indholdet
.offcanvas-startskjuler offcanvas til venstre
.offcanvas-endskjuler offcanvas til højre
.offcanvas-bottomskjuler offcanvas i bunden

Tilføj en afvis-knap med data-bs-dismiss="offcanvas"attributten, som udløser JavaScript-funktionaliteten. Sørg for at bruge <button>elementet med det for korrekt adfærd på tværs af alle enheder.

Via dataattributter

Tilføj data-bs-toggle="offcanvas"og et data-bs-targeteller hreftil elementet for automatisk at tildele kontrol over ét offcanvas-element. Attributten data-bs-targetaccepterer en CSS-vælger at anvende offcanvas på. Sørg for at tilføje klassen offcanvastil offcanvas-elementet. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse show.

Via JavaScript

Aktiver manuelt med:

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

Muligheder

Indstillinger kan videregives via dataattributter eller JavaScript. For dataattributter skal du tilføje indstillingsnavnet til data-bs-, som i data-bs-backdrop="".

Navn	Type	Standard	Beskrivelse
`backdrop`	boolesk	`true`	Påfør en baggrund på kroppen, mens offcanvas er åben
`keyboard`	boolesk	`true`	Lukker offcanvas, når der trykkes på escape-tasten
`scroll`	boolesk	`false`	Tillad kropsrulning, mens offcanvas er åben

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

Aktiverer dit indhold som et offcanvas-element. Accepterer en valgfri indstilling object.

Du kan oprette en offcanvas-instans med konstruktøren, for eksempel:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metode	Beskrivelse
`toggle`	Skifter et offcanvas-element til at blive vist eller skjult. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet vist eller skjult (dvs. før hændelsen `shown.bs.offcanvas`eller `hidden.bs.offcanvas`indtræffer).
`show`	Viser et offcanvas-element. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet vist (dvs. før `shown.bs.offcanvas`hændelsen indtræffer).
`hide`	Skjuler et offcanvas-element. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet skjult (dvs. før `hidden.bs.offcanvas`hændelsen indtræffer).
`getInstance`	Statisk metode, som giver dig mulighed for at få offcanvas-instansen tilknyttet et DOM-element
`getOrCreateInstance`	Statisk metode, som giver dig mulighed for at få offcanvas-forekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret

Begivenheder

Bootstraps offcanvas-klasse afslører nogle få hændelser til at tilslutte sig offcanvas-funktionalitet.

Begivenhedstype	Beskrivelse
`show.bs.offcanvas`	Denne hændelse udløses med det samme, når `show`instansmetoden kaldes.
`shown.bs.offcanvas`	Denne hændelse udløses, når et offcanvas-element er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført).
`hide.bs.offcanvas`	Denne hændelse udløses straks, når `hide`metoden er blevet kaldt.
`hidden.bs.offcanvas`	Denne hændelse udløses, når et offcanvas-element er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Hvordan det virker

Eksempler

Offcanvas komponenter

Offcanvas

Live demo

Offcanvas

Placering

Offcanvas top

Offcanvas højre

Offcanvas bund

Bagtæppe

Farvet med rulning

Offcanvas med baggrund

Baggrund med rulning

Tilgængelighed

Sass

Variabler

Brug

Via dataattributter

Via JavaScript

Muligheder

Metoder

Asynkrone metoder og overgange

Begivenheder