Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
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, uewen oder ënnen 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.
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 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 mat dem 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.
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>

Kierper scrollen

D'Scrolling vum <body>Element ass behënnert wann en Offcanvas a seng Kuliss siichtbar sinn. Benotzt den data-bs-scrollAttribut fir <body>Scrollen z'aktivéieren.

Offcanvas mat Kierper Scrollen

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

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>

Kierper scrollen an Kuliss

Dir kënnt och <body>Scrollen mat engem sichtbare Kuliss aktivéieren.

Kuliss mat Scrollen

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

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>

Statesch Kuliss

Wann den Hannergrond op statesch gesat ass, gëtt den Offcanvas net zou wann Dir dobausse klickt.

Offcanvas
Ech wäert net zoumaachen wann Dir ausserhalb vu mir klickt.
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>

Däischter Offcanvas

Dobäi an v5.2.0

Ännert d'Erscheinung vun Offcanvasen mat Utilities fir se besser mat verschiddene Kontexter wéi donkel Navbars ze passen. Hei fügen .text-bg-darkmir der .offcanvasan .btn-close-whitefir .btn-closerichteg Styling mat engem donkelen Offcanvas. Wann Dir Dropdowns bannent hutt, betruecht och derbäi .dropdown-menu-darkze .dropdown-menu.

Offcanvas

Plaz offcanvas Inhalt hei.

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>

Reaktiounsfäeger

Dobäi an v5.2.0

Reaktiounsfäeger Offcanvas Klassen verstoppen Inhalt ausserhalb vum Viewport vun engem spezifizéierte Breakpoint an erof. Iwwert deem Breakpoint wäert den Inhalt dobannen sech wéi gewinnt behuelen. Zum Beispill .offcanvas-lgverstoppt Inhalt an engem Offcanvas ënner dem lgBreakpoint, awer weist den Inhalt iwwer dem lgBreakpoint.

Ännert Äre Browser d'Gréisst fir de reaktiounsfäeger Offcanvas Toggle ze weisen.
Reaktiounsfäeger offcanvas

Dëst ass Inhalt an engem .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>

Reaktiounsfäeger Offcanvas Klassen sinn iwwer all Breakpoint verfügbar.

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

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

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.

CSS

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, offcanvas benotzt elo lokal CSS Variablen op .offcanvasfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

  --#{$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 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 riets
  • .offcanvas-topverstoppt den Offcanvas uewen
  • .offcanvas-bottomverstoppt den Offcanvas ënnen

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

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

Entlooss

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 ARIA Authoring Practices Guide Dialog (modal) Muster entsprécht . Maachen dëst op Ären eegene Risiko.

Iwwer JavaScript

Aktivéiert manuell mat:

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

Optiounen

Wéi Optiounen kënnen iwwer Dateattributer oder JavaScript weidergeleet ginn, kënnt Dir en Optiounsnumm op data-bs-, wéi an data-bs-animation="{value}". Vergewëssert Iech de Falltyp vum Optiounsnumm vun " camelCase " op " Kebab-Case " z'änneren wann Dir d'Optiounen iwwer Datenattributer passéiert. Zum Beispill benotzt data-bs-custom-class="beautifier"amplaz data-bs-customClass="beautifier".

Zënter Bootstrap 5.2.0 ënnerstëtzen all Komponenten en experimentellen reservéierten Dateattribut, data-bs-configdeen eng einfach Komponentkonfiguratioun als JSON-String kann ënnerhuelen. Wann en Element data-bs-config='{"delay":0, "title":123}'an data-bs-title="456"Attributer huet, gëtt de Finale titleWäert 456an déi getrennten Dateattributter iwwerschreiden Wäerter, déi op data-bs-config. Zousätzlech kënnen existent Datenattributer JSON Wäerter wéi data-bs-delay='{"show":0,"hide":150}'.

Numm Typ Default Beschreiwung
backdrop boolesch oder de Stringstatic true Fëllt en Kuliss op de Kierper wärend Offcanvas op ass. Alternativ spezifizéiert staticfir eng Kuliss déi den Offcanvas net zoumaacht wann Dir klickt.
keyboard boolesch true Maacht den Offcanvas zou wann d'Escape-Tast 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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Method Beschreiwung
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 eng nei ze kreéieren am Fall wou se net initialiséiert gouf.
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).
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).
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).

Evenementer

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

Event Typ Beschreiwung
hide.bs.offcanvas Dëst Evenement gëtt direkt gebrannt wann d' hideMethod genannt gouf.
hidden.bs.offcanvas Dëst Evenement gëtt ausgeléist wann en Offcanvas Element vum Benotzer verstoppt ass (waart op CSS Iwwergäng fir fäerdeg ze maachen).
hidePrevented.bs.offcanvas Dëst Evenement gëtt ausgeléist wann den Offcanvas gewise gëtt, seng Kuliss ass statican e Klick ausserhalb vum Offcanvas gëtt gemaach. D'Evenement gëtt och gebrannt wann de Fluchtschlëssel gedréckt gëtt an d' keyboardOptioun op gesat gëtt false.
show.bs.offcanvas Dëst Event brennt direkt wann d' showInstanzmethod genannt gëtt.
shown.bs.offcanvas Dëst Evenement gëtt ausgeléist wann en Offcanvas Element fir de Benotzer siichtbar gemaach gouf (waart op CSS Iwwergäng fir fäerdeg ze maachen). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})