Off-canvas
Bouw verborgen zijbalken in uw project voor navigatie, winkelwagentjes en meer met een paar klassen en onze JavaScript-plug-in.
Hoe het werkt
Offcanvas is een zijbalkcomponent die via JavaScript kan worden weergegeven vanaf de linker-, rechter- of onderrand van de viewport. Knoppen of ankers worden gebruikt als triggers die zijn gekoppeld aan specifieke elementen die u inschakelt, en data
attributen worden gebruikt om ons JavaScript aan te roepen.
- Offcanvas deelt een deel van dezelfde JavaScript-code als modals. Conceptueel lijken ze veel op elkaar, maar het zijn afzonderlijke plug-ins.
- Evenzo worden sommige Sass -bronvariabelen voor de stijlen en dimensies van offcanvas overgenomen van de modale variabelen.
- Indien weergegeven, bevat offcanvas een standaardachtergrond waarop kan worden geklikt om de offcanvas te verbergen.
- Net als bij modals kan er slechts één offcanvas tegelijk worden weergegeven.
Kop op! Gezien de manier waarop CSS met animaties omgaat, kunt u geen margin
of translate
op een .offcanvas
element gebruiken. Gebruik in plaats daarvan de klasse als een onafhankelijk verpakkingselement.
prefers-reduced-motion
mediaquery. Zie het
gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .
Voorbeelden
Offcanvas-componenten
Hieronder staat een offcanvas voorbeeld dat standaard getoond wordt (via .show
on .offcanvas
). Offcanvas biedt ondersteuning voor een header met een close-knop en een optionele body-klasse voor sommige initialen padding
. We raden u aan waar mogelijk offcanvas-headers op te nemen met afwijzingsacties, of een expliciete afwijzingsactie op te geven.
Off-canvas
<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 demonstratie
Gebruik de onderstaande knoppen om een offcanvas-element weer te geven en te verbergen via JavaScript dat de .show
klasse op een element met de .offcanvas
klasse schakelt.
.offcanvas
verbergt inhoud (standaard).offcanvas.show
toont inhoud
U kunt een link met het href
attribuut gebruiken, of een knop met het data-bs-target
attribuut. In beide gevallen data-bs-toggle="offcanvas"
is het verplicht.
Off-canvas
<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>
Plaatsing
Er is geen standaardplaatsing voor offcanvas-componenten, dus u moet een van de onderstaande modificatieklassen toevoegen;
.offcanvas-start
plaatst offcanvas aan de linkerkant van de viewport (hierboven weergegeven).offcanvas-end
plaatst offcanvas aan de rechterkant van de viewport.offcanvas-top
plaatst offcanvas op de bovenkant van de viewport.offcanvas-bottom
plaatst offcanvas onderaan de viewport
Probeer de voorbeelden bovenaan, rechts en onderaan hieronder.
Off-canvas 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>
Off-canvas rechts
<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 bodem
<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>
achtergrond
Scrollen door het <body>
element is uitgeschakeld wanneer een offcanvas en zijn achtergrond zichtbaar zijn. Gebruik het data-bs-scroll
attribuut om te schakelen tussen <body>
scrollen en data-bs-backdrop
om de achtergrond te wisselen.
Gekleurd met scrollen
Probeer de rest van de pagina te scrollen om deze optie in actie te zien.
Offcanvas met achtergrond
.....
Achtergrond met scrollen
Probeer de rest van de pagina te scrollen om deze optie in actie te zien.
<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>
Toegankelijkheid
Aangezien het offcanvas-paneel conceptueel een modaal dialoogvenster is, moet u aria-labelledby="..."
—verwijzend naar de offcanvas-titel — toevoegen aan .offcanvas
. Merk op dat u niets hoeft toe te voegen role="dialog"
, omdat we het al toevoegen via JavaScript.
Sass
Variabelen
$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;
Gebruik
De offcanvas-plug-in gebruikt een paar klassen en attributen om het zware werk aan te kunnen:
.offcanvas
verbergt de inhoud.offcanvas.show
toont de inhoud.offcanvas-start
verbergt het offcanvas aan de linkerkant.offcanvas-end
verbergt het offcanvas aan de rechterkant.offcanvas-bottom
verbergt het offcanvas aan de onderkant
Voeg een afwijsknop toe met het data-bs-dismiss="offcanvas"
kenmerk, waarmee de JavaScript-functionaliteit wordt geactiveerd. Zorg ervoor dat u het <button>
element ermee gebruikt voor correct gedrag op alle apparaten.
Via gegevensattributen
Schakelaar
Voeg data-bs-toggle="offcanvas"
en een data-bs-target
of href
toe aan het element om automatisch de besturing van één offcanvas-element toe te wijzen. Het data-bs-target
attribuut accepteert een CSS-selector om het offcanvas op toe te passen. Zorg ervoor dat u de klasse toevoegt offcanvas
aan het offcanvas-element. Als u wilt dat deze standaard wordt geopend, voegt u de extra klasse toe show
.
Afwijzen
Ontslag kan worden bereikt met het data
kenmerk op een knop binnen het offcanvas , zoals hieronder wordt aangetoond:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
of op een knop buiten het offcanvas met behulp van de data-bs-target
onderstaande afbeelding:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Via JavaScript
Handmatig inschakelen met:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opties
Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voeg voor gegevensattributen de optienaam toe aan data-bs-
, zoals in data-bs-backdrop=""
.
Naam | Type | Standaard | Beschrijving |
---|---|---|---|
backdrop |
booleaans | true |
Breng een achtergrond aan op het lichaam terwijl offcanvas open is |
keyboard |
booleaans | true |
Sluit de offcanvas wanneer de escape-toets wordt ingedrukt |
scroll |
booleaans | false |
Sta body scrollen toe terwijl offcanvas open is |
Methoden:
Asynchrone methoden en overgangen
Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .
Activeert uw inhoud als een offcanvas-element. Accepteert een optionele optie object
.
U kunt een offcanvas-instantie maken met de constructor, bijvoorbeeld:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Methode | Beschrijving |
---|---|
toggle |
Schakelt een offcanvas-element om naar weergegeven of verborgen. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk is getoond of verborgen (dwz voordat de shown.bs.offcanvas of - hidden.bs.offcanvas gebeurtenis plaatsvindt). |
show |
Toont een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk is getoond (dwz voordat de shown.bs.offcanvas gebeurtenis plaatsvindt). |
hide |
Verbergt een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk is verborgen (dwz voordat de hidden.bs.offcanvas gebeurtenis plaatsvindt). |
getInstance |
Statische methode waarmee u de offcanvas-instantie kunt koppelen aan een DOM-element |
getOrCreateInstance |
Statische methode waarmee u de offcanvas-instantie kunt koppelen aan een DOM-element, of een nieuwe kunt maken voor het geval deze niet is geïnitialiseerd |
Evenementen
De offcanvas-klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op offcanvas-functionaliteit.
Evenementtype | Beschrijving |
---|---|
show.bs.offcanvas |
Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de show instantiemethode wordt aangeroepen. |
shown.bs.offcanvas |
Deze gebeurtenis wordt geactiveerd wanneer een offcanvas-element zichtbaar is gemaakt voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
hide.bs.offcanvas |
Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hide methode is aangeroepen. |
hidden.bs.offcanvas |
Deze gebeurtenis wordt geactiveerd wanneer een offcanvas-element is verborgen voor de gebruiker (wacht tot de CSS-overgangen zijn voltooid). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})