Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Offcanvas

Baut verstoppte Sidebaren an Ärem Projet fir Navigatioun, Shopping Weenchen, a méi mat e puer Klassen an eisem JavaScript Plugin.

Op dëser Säit

Wéi et funktionnéiert

Offcanvas ass e Sidebar Komponent deen iwwer JavaScript geschalt ka ginn fir vu lénks, riets oder ënnen Rand vum Viewport ze erschéngen. Knäppercher oder Anker ginn als Ausléiser benotzt, déi un spezifesch Elementer befestegt sinn, déi Dir wiesselt, an dataAttributer gi benotzt fir eis JavaScript opzeruffen.

  • Offcanvas deelt e puer vum selwechte JavaScript Code wéi Modal. Konzeptuell si se ganz ähnlech, awer si sinn separat Plugins.
  • Ähnlech sinn e puer Quell Sass Variablen fir Offcanvas Stiler an Dimensiounen aus de Modal Variablen ierflecher.
  • Wann et ugewise gëtt, enthält Offcanvas e Standard Kuliss, deen geklickt ka ginn fir den Offcanvas ze verstoppen.
  • Ähnlech wéi Modale kann nëmmen een Offcanvas gläichzäiteg gewisen ginn.

Kapp erop! Gitt wéi CSS Animatiounen handhabt, kënnt Dir net benotzen marginoder translateop engem .offcanvasElement. Amplaz benotzt d'Klass als onofhängeg Wrapelement.

Den Animatiounseffekt vun dëser Komponent hänkt vun der prefers-reduced-motionMedienufro of. Kuckt d' Reduktiounsbewegungssektioun vun eiser Accessibilitéitsdokumentatioun .

Beispiller

Offcanvas Komponenten

Drënner ass en Offcanvas Beispill dat als Standard ugewise gëtt (iwwer .showop .offcanvas). Offcanvas enthält Ënnerstëtzung fir en Header mat engem Zoumaache Knäppchen an eng optional Kierperklass fir e puer initial padding. Mir proposéieren datt Dir Offcanvas Header mat Entloossaktiounen abegraff wa méiglech, oder eng explizit Entloossaktioun ubitt.

Offcanvas
Inhalt fir den Offcanvas geet hei. Dir kënnt just iwwer all Bootstrap Komponent oder personaliséiert Elementer hei placéieren. 
<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

Benotzt d'Knäppercher hei ënnen fir en Offcanvas Element iwwer JavaScript ze weisen an ze verstoppen, deen d' .showKlass op en Element mat der .offcanvasKlass wiesselt.

  • .offcanvasverstoppt Inhalt (Standard)
  • .offcanvas.showweist Inhalt

Dir kënnt e Link mam hrefAttribut benotzen, oder e Knäppchen mam data-bs-targetAttribut. A béide Fäll data-bs-toggle="offcanvas"ass et néideg.

Link mat href
Offcanvas
E puer Text als Plazhalter. Am richtege Liewen kënnt Dir d'Elementer hunn, déi Dir gewielt hutt. Wéi, Text, Biller, Lëschten, 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>

Placement

Et gëtt keng Standardplazéierung fir Offcanvas Komponenten, also musst Dir eng vun de Modifizéierungsklassen hei drënner addéieren;

  • .offcanvas-startplazéiert Offcanvas op der lénker Säit vum Viewport (uewe gewisen)
  • .offcanvas-endPlazen offcanvas op der rietser Säit vun der viewport
  • .offcanvas-topplazéiert offcanvas op der Spëtzt vum Viewport
  • .offcanvas-bottomPlazen offcanvas um ënnen vun der viewport

Probéiert déi iewescht, riets an ënnen Beispiller hei ënnen.

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 richteg
... 
<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 ënnen
... 
<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>

Kuliss

D'Scrolling vum <body>Element ass behënnert wann en Offcanvas a seng Kuliss siichtbar sinn. Benotzt den data-bs-scrollAttribut fir <body>Scrollen data-bs-backdropze wiesselen an den Kuliss ze wiesselen.

Faarweg mat Scrollen

Probéiert de Rescht vun der Säit ze scrollen fir dës Optioun an Aktioun ze gesinn.

Offcanvas mat Kuliss

.....

Kuliss mat Scrollen

Probéiert de Rescht vun der Säit ze scrollen fir dës Optioun an Aktioun ze gesinn.

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

Accessibilitéit

Zënter datt d'Offcanvas Panel konzeptuell e modalen Dialog ass, gitt sécher ze addéieren aria-labelledby="..."- mam Referenz op den Offcanvas Titel - op .offcanvas. Notéiert datt Dir net braucht derbäi ze ginn role="dialog"well mir et scho iwwer JavaScript addéieren.

Sass

Variablen

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

Benotzung

Den Offcanvas Plugin benotzt e puer Klassen an Attributer fir déi schwéier Lift ze handhaben:

  • .offcanvasverstoppt den Inhalt
  • .offcanvas.showweist den Inhalt
  • .offcanvas-startverstoppt den Offcanvas lénks
  • .offcanvas-endverstoppt den Offcanvas op der rietser Säit
  • .offcanvas-bottomverstoppt den Offcanvas ënnen

Füügt en Entlooss Knäppchen mat dem data-bs-dismiss="offcanvas"Attribut, wat d'JavaScript Funktionalitéit ausléist. Vergewëssert Iech d' <button>Element domat ze benotzen fir entspriechend Verhalen iwwer all Apparater.

Via daten Attributer

Toggle

Füügt data-bs-toggle="offcanvas"an en data-bs-targetoder hrefzum Element fir automatesch d'Kontroll vun engem Offcanvas-Element ze ginn. D' data-bs-targetAttribut akzeptéiert en CSS Selektor fir den Offcanvas opzemaachen. Gitt sécher d'Klass offcanvasop d'Offcanvas Element ze addéieren. Wann Dir wëllt datt et als Standard opmaacht, füügt déi zousätzlech Klass show.

Entloossen

Entloossung ka mam dataAttribut op engem Knäpp am Offcanvas erreecht ginn wéi hei ënnen gewisen:

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

oder op engem Knäppchen ausserhalb vum Offcanvas benotzt de data-bs-targetwéi hei ënnen gewisen:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Wärend béid Weeër fir en Offcanvas ze entloossen ënnerstëtzt ginn, bedenkt datt d'Entloossung vu baussen en Offcanvas net mam WAI-ARIA modalen Dialog Design Muster entsprécht . Maachen dëst op Ären eegene Risiko.

Iwwer JavaScript

Aktivéiert manuell mat:

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

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-bs-, wéi an data-bs-backdrop="".

Numm Typ Default Beschreiwung
backdrop boolesch true Fëllt en Kuliss op de Kierper wärend Offcanvas op ass
keyboard boolesch true Maacht den Offcanvas zou wann d'Escape-Taste gedréckt gëtt
scroll boolesch false Erlaabt Kierper scrollen wärend Offcanvas op ass

Methoden

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

Aktivéiert Ären Inhalt als Offcanvas Element. Akzeptéiert eng fakultativ Optiounen object.

Dir kënnt eng Offcanvas Instanz mam Konstruktor erstellen, zum Beispill:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Beschreiwung
toggle Wiesselt en Offcanvas Element fir ze weisen oder ze verstoppen. Gitt zréck op den Uruffer ier den Offcanvas-Element tatsächlech gewisen oder verstoppt goufshown.bs.offcanvas ( dh ier den hidden.bs.offcanvasEvent geschitt ass).
show Weist en Offcanvas Element. Gitt zréck op den Uruffer ier den Offcanvas-Element tatsächlech gewisen gouf (dh ier d' shown.bs.offcanvasEvenement geschitt ass).
hide Verstoppt en Offcanvas Element. Gitt zréck op den Uruffer ier den Offcanvas-Element tatsächlech verstoppt gouf (dh ier d' hidden.bs.offcanvasEvenement geschitt ass).
getInstance Statesch Method déi Iech erlaabt d'Offcanvas Instanz mat engem DOM Element assoziéiert ze kréien
getOrCreateInstance Statesch Method déi Iech erlaabt d'Offcanvas Instanz mat engem DOM Element assoziéiert ze kréien, oder en neit erstellen am Fall datt et net initialiséiert gouf

Evenementer

Bootstrap's Offcanvas Klass weist e puer Eventer aus fir an Offcanvas Funktionalitéit ze hooken.

Event Typ Beschreiwung
show.bs.offcanvas Dëst Event brennt direkt wann d' showInstanzmethod genannt gëtt.
shown.bs.offcanvas Dëst Evenement gëtt ofgeléist wann en Offcanvas Element fir de Benotzer siichtbar gemaach gouf (waart bis CSS Iwwergäng fäerdeg sinn).
hide.bs.offcanvas Dëst Evenement gëtt direkt gebrannt wann d' hideMethod genannt gouf.
hidden.bs.offcanvas Dëst Evenement gëtt ofgeléist wann en Offcanvas Element vum Benotzer verstoppt ass (waart bis CSS Iwwergäng fäerdeg sinn). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})