Off-canvas

Bouw verborgen zijbalken in uw project voor navigatie, winkelwagentjes en meer met een paar klassen en onze JavaScript-plug-in.

Op deze pagina

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 dataattributen 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 marginof translateop een .offcanvaselement gebruiken. Gebruik in plaats daarvan de klasse als een onafhankelijk verpakkingselement.

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. Zie het gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .

Voorbeelden

Offcanvas-componenten

Hieronder staat een offcanvas voorbeeld dat standaard getoond wordt (via .showon .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.

Inhoud voor het offcanvas komt hier. U kunt hier zowat elke Bootstrap-component of aangepaste elementen plaatsen.

<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 .showklasse op een element met de .offcanvasklasse schakelt.

.offcanvasverbergt inhoud (standaard)
.offcanvas.showtoont inhoud

U kunt een link met het hrefattribuut gebruiken, of een knop met het data-bs-targetattribuut. In beide gevallen data-bs-toggle="offcanvas"is het verplicht.

Link met href

Wat tekst als tijdelijke aanduiding. In het echte leven kun je de elementen hebben die je hebt gekozen. Zoals, tekst, afbeeldingen, lijsten, etc.

<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-startplaatst offcanvas aan de linkerkant van de viewport (hierboven weergegeven)
.offcanvas-endplaatst offcanvas aan de rechterkant van de viewport
.offcanvas-topplaatst offcanvas op de bovenkant van de viewport
.offcanvas-bottomplaatst offcanvas onderaan de viewport

Probeer de voorbeelden bovenaan, rechts en onderaan hieronder.

...

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

achtergrond

Scrollen door het <body>element is uitgeschakeld wanneer een offcanvas en zijn achtergrond zichtbaar zijn. Gebruik het data-bs-scrollattribuut om te schakelen tussen <body>scrollen en data-bs-backdropom de achtergrond te wisselen.

Probeer de rest van de pagina te scrollen om deze optie in actie te zien.

.....

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:

.offcanvasverbergt de inhoud
.offcanvas.showtoont de inhoud
.offcanvas-startverbergt het offcanvas aan de linkerkant
.offcanvas-endverbergt het offcanvas aan de rechterkant
.offcanvas-bottomverbergt 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-targetof hreftoe aan het element om automatisch de besturing van één offcanvas-element toe te wijzen. Het data-bs-targetattribuut accepteert een CSS-selector om het offcanvas op toe te passen. Zorg ervoor dat u de klasse toevoegt offcanvasaan 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 datakenmerk 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-targetonderstaande afbeelding:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Hoewel beide manieren om een offcanvas te negeren worden ondersteund, moet u er rekening mee houden dat het negeren van een offcanvas van buitenaf niet overeenkomt met het WAI-ARIA modale dialoogvensterontwerppatroon . Doe dit op eigen risico.

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 .

Zie onze JavaScript-documentatie voor meer informatie .

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

Off-canvas

Hoe het werkt

Voorbeelden

Offcanvas-componenten

Off-canvas

Live demonstratie

Off-canvas

Plaatsing

Off-canvas top

Off-canvas rechts

Offcanvas bodem

achtergrond

Gekleurd met scrollen

Offcanvas met achtergrond

Achtergrond met scrollen

Toegankelijkheid

Sass

Variabelen

Gebruik

Via gegevensattributen

Schakelaar

Afwijzen

Via JavaScript

Opties

Methoden:

Asynchrone methoden en overgangen

Evenementen