Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

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

Off-canvas
Inhoud voor het offcanvas komt hier. U kunt hier zowat elke Bootstrap-component of aangepaste elementen plaatsen.
html 
<div class="offcanvas offcanvas-start show" 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" 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
Off-canvas
Wat tekst als tijdelijke aanduiding. In het echte leven kun je de elementen hebben die je hebt gekozen. Zoals, tekst, afbeeldingen, lijsten, etc.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Lichaam scrollen

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

Offcanvas met body-scrolling

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Body scrollen en achtergrond

U kunt <body>scrollen ook inschakelen met een zichtbare achtergrond.

Achtergrond met scrollen

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

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

Statische achtergrond

Als de achtergrond is ingesteld op statisch, zal het offcanvas niet sluiten als er buiten wordt geklikt.

Off-canvas
Ik sluit niet als je buiten mij klikt.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Donker offcanvas

Toegevoegd in v5.2.0

Verander het uiterlijk van offcanvases met hulpprogramma's om ze beter af te stemmen op verschillende contexten, zoals donkere navigatiebalken. Hier voegen .text-bg-darkwe de .offcanvasen .btn-close-whiteaan toe .btn-closevoor een goede styling met een donker offcanvas. Als je dropdown-menu's hebt, overweeg dan ook om toe te voegen .dropdown-menu-darkaan .dropdown-menu.

Off-canvas

Plaats hier offcanvas-content.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Snel reagerend

Toegevoegd in v5.2.0

Responsieve offcanvas-klassen verbergen inhoud buiten de viewport vanaf een opgegeven breekpunt en naar beneden. Boven dat breekpunt zal de inhoud zich normaal gedragen. Verbergt bijvoorbeeld .offcanvas-lginhoud in een offcanvas onder het lgbreekpunt, maar toont de inhoud boven het lgbreekpunt.

Pas het formaat van uw browser aan om de responsieve offcanvas-schakelaar weer te geven.
Responsieve offcanvas

Dit is inhoud binnen een .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Responsieve offcanvas-klassen zijn beschikbaar voor elk breekpunt.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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.

Off-canvas top
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Off-canvas rechts
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas bodem
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruikt offcanvas nu lokale CSS .offcanvas-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

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-topverbergt het offcanvas bovenaan
  • .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 sluiten worden ondersteund, moet u er rekening mee houden dat het negeren van buiten een offcanvas niet overeenkomt met het ARIA Authoring Practices Guide-dialoogpatroon (modaal) . Doe dit op eigen risico.

Via JavaScript

Handmatig inschakelen met:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Opties

Omdat opties kunnen worden doorgegeven via gegevensattributen of JavaScript, kunt u een optienaam toevoegen aan data-bs-, zoals in data-bs-animation="{value}". Zorg ervoor dat u het kasttype van de optienaam wijzigt van " camelCase " in " kebab-case " wanneer u de opties doorgeeft via gegevensattributen. Gebruik bijvoorbeeld in data-bs-custom-class="beautifier"plaats van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteunen alle componenten een experimenteel gereserveerd gegevenskenmerk data-bs-configdat een eenvoudige componentconfiguratie als een JSON-tekenreeks kan bevatten. Wanneer een element attributen heeft data-bs-config='{"delay":0, "title":123}', zal data-bs-title="456"de uiteindelijke titlewaarde zijn 456en zullen de afzonderlijke gegevensattributen de waarden overschrijven die op data-bs-config. Bovendien kunnen bestaande gegevensattributen JSON-waarden zoals data-bs-delay='{"show":0,"hide":150}'.

Naam Type Standaard Beschrijving
backdrop boolean of de stringstatic true Breng een achtergrond aan op het lichaam terwijl offcanvas open is. U kunt ook een achtergrond opgeven staticdie het offcanvas niet sluit wanneer erop wordt geklikt.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Methode Beschrijving
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.
hide Verbergt een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk is verborgen (dwz voordat de hidden.bs.offcanvasgebeurtenis plaatsvindt).
show Toont een offcanvas-element. Keert terug naar de aanroeper voordat het offcanvas-element daadwerkelijk is getoond (dwz voordat de shown.bs.offcanvasgebeurtenis plaatsvindt).
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.offcanvasof - hidden.bs.offcanvasgebeurtenis plaatsvindt).

Evenementen

De offcanvas-klasse van Bootstrap onthult een paar gebeurtenissen voor het aansluiten op offcanvas-functionaliteit.

Evenementtype Beschrijving
hide.bs.offcanvas Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de hidemethode 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).
hidePrevented.bs.offcanvas Deze gebeurtenis wordt geactiveerd wanneer het offcanvas wordt weergegeven, de achtergrond is staticen een klik buiten het offcanvas wordt uitgevoerd. De gebeurtenis wordt ook geactiveerd wanneer de escape-toets wordt ingedrukt en de keyboardoptie is ingesteld op false.
show.bs.offcanvas Deze gebeurtenis wordt onmiddellijk geactiveerd wanneer de showinstantiemethode 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})