Offcanvas
Byg skjulte sidebjælker ind i dit projekt til navigation, indkøbskurve og mere med nogle få klasser og vores JavaScript-plugin.
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 data
attributter 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 margin
eller translate
på et .offcanvas
element. Brug i stedet klassen som et selvstændigt indpakningselement.
prefers-reduced-motion
medieforespørgslen. Se afsnittet om
reduceret bevægelse i vores tilgængelighedsdokumentation .
Eksempler
Offcanvas komponenter
Nedenfor er et offcanvas-eksempel, der vises som standard (via .show
on .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.
Offcanvas
<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 .show
klassen til et element med .offcanvas
klassen.
.offcanvas
skjuler indhold (standard).offcanvas.show
viser indhold
Du kan bruge et link med href
attributten eller en knap med data-bs-target
attributten. I begge tilfælde er det data-bs-toggle="offcanvas"
påkrævet.
Offcanvas
<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-start
placerer offcanvas til venstre for viewporten (vist ovenfor).offcanvas-end
placerer offcanvas til højre for viewporten.offcanvas-top
placerer offcanvas på toppen af viewporten.offcanvas-bottom
placerer offcanvas i bunden af viewporten
Prøv de øverste, højre og nederste eksempler nedenfor.
Offcanvas top
<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øjre
<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 bund
<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-scroll
attributten til at skifte mellem <body>
rulning og data-bs-backdrop
til at skifte mellem baggrunden.
Farvet med rulning
Prøv at rulle resten af siden for at se denne mulighed i aktion.
Offcanvas med baggrund
.....
Baggrund med rulning
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:
.offcanvas
skjuler indholdet.offcanvas.show
viser indholdet.offcanvas-start
skjuler offcanvas til venstre.offcanvas-end
skjuler offcanvas til højre.offcanvas-bottom
skjuler 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-target
eller href
til elementet for automatisk at tildele kontrol over ét offcanvas-element. Attributten data-bs-target
accepterer en CSS-vælger at anvende offcanvas på. Sørg for at tilføje klassen offcanvas
til 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 .
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...
})