Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Leinwand

Bauen Sie mit einigen Klassen und unserem JavaScript-Plug-in versteckte Seitenleisten für die Navigation, Warenkörbe und mehr in Ihr Projekt ein.

Auf dieser Seite

Wie es funktioniert

Offcanvas ist eine Seitenleistenkomponente, die per JavaScript so umgeschaltet werden kann, dass sie am linken, rechten, oberen oder unteren Rand des Ansichtsfensters angezeigt wird. Schaltflächen oder Anker werden als Auslöser verwendet, die an bestimmte Elemente angehängt sind, die Sie umschalten, und dataAttribute werden verwendet, um unser JavaScript aufzurufen.

  • Offcanvas teilt einen Teil des gleichen JavaScript-Codes wie Modale. Konzeptionell sind sie ziemlich ähnlich, aber sie sind separate Plugins.
  • In ähnlicher Weise werden einige Quell-Sass -Variablen für die Stile und Abmessungen von Offcanvas von den Variablen des Modals geerbt.
  • Wenn Offcanvas angezeigt wird, enthält es einen Standardhintergrund, auf den geklickt werden kann, um Offcanvas auszublenden.
  • Ähnlich wie bei Modalen kann jeweils nur ein Offcanvas angezeigt werden.

Kopf hoch! Angesichts der Art und Weise, wie CSS mit Animationen umgeht, können Sie marginoder nicht translatefür ein .offcanvasElement verwenden. Verwenden Sie stattdessen die Klasse als unabhängiges Wrapping-Element.

Der Animationseffekt dieser Komponente ist abhängig von der prefers-reduced-motionMedienanfrage. Weitere Informationen finden Sie im Abschnitt zur reduzierten Bewegung in unserer Dokumentation zur Barrierefreiheit .

Beispiele

Offcanvas-Komponenten

Unten ist ein Offcanvas-Beispiel, das standardmäßig angezeigt wird (über .showon .offcanvas). Offcanvas enthält Unterstützung für eine Kopfzeile mit einer Schließen-Schaltfläche und eine optionale Body-Klasse für einige anfängliche padding. Wir empfehlen, dass Sie nach Möglichkeit Offcanvas-Header mit Entlassungsaktionen einschließen oder eine explizite Entlassungsaktion bereitstellen.

Leinwand
Inhalte für die Offcanvas kommen hierher. Sie können hier nahezu jede Bootstrap-Komponente oder benutzerdefinierte Elemente platzieren.
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

Verwenden Sie die Schaltflächen unten, um ein Offcanvas-Element über JavaScript ein- und auszublenden, das die .showKlasse auf einem Element mit der .offcanvasKlasse umschaltet.

  • .offcanvasblendet Inhalt aus (Standard)
  • .offcanvas.showzeigt Inhalt

Sie können einen Link mit dem hrefAttribut oder eine Schaltfläche mit dem data-bs-targetAttribut verwenden. In beiden Fällen ist das data-bs-toggle="offcanvas"erforderlich.

Link mit href
Leinwand
Etwas Text als Platzhalter. Im wirklichen Leben können Sie die Elemente haben, die Sie gewählt haben. Wie Text, Bilder, Listen usw.
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>

Body-Scrolling

Das Scrollen des <body>Elements ist deaktiviert, wenn ein Offcanvas und sein Hintergrund sichtbar sind. Verwenden Sie das data-bs-scrollAttribut, um das <body>Scrollen zu ermöglichen.

Offcanvas mit Body-Scrolling

Versuchen Sie, den Rest der Seite zu scrollen, um diese Option in Aktion zu sehen.

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-Scrolling und Hintergrund

Sie können auch das <body>Scrollen mit einem sichtbaren Hintergrund aktivieren.

Hintergrund mit Scrollen

Versuchen Sie, den Rest der Seite zu scrollen, um diese Option in Aktion zu sehen.

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>

Statischer Hintergrund

Wenn der Hintergrund auf statisch eingestellt ist, wird die Offcanvas nicht geschlossen, wenn Sie außerhalb davon klicken.

Leinwand
Ich werde nicht schließen, wenn Sie außerhalb von mir klicken.
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>

Dunkle Leinwand

Hinzugefügt in v5.2.0

Ändern Sie das Erscheinungsbild von Offcanvases mit Dienstprogrammen, um sie besser an verschiedene Kontexte wie dunkle Navigationsleisten anzupassen. Hier fügen wir .text-bg-darkzum .offcanvasund .btn-close-whitezum .btn-closefür das richtige Styling mit einem dunklen Offcanvas hinzu. Wenn Sie Dropdowns darin haben, sollten Sie auch das Hinzufügen .dropdown-menu-darkzu in Betracht ziehen .dropdown-menu.

Leinwand

Platzieren Sie hier Offcanvas-Inhalte.

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>

Reaktionsschnell

Hinzugefügt in v5.2.0

Responsive Offcanvas-Klassen verstecken Inhalte außerhalb des Darstellungsbereichs ab einem angegebenen Haltepunkt und nach unten. Oberhalb dieses Haltepunkts verhalten sich die darin enthaltenen Inhalte wie gewohnt. Blendet beispielsweise .offcanvas-lgInhalte in einem Offcanvas unterhalb des lgHaltepunkts aus, zeigt aber den Inhalt über dem lgHaltepunkt an.

Passen Sie die Größe Ihres Browsers an, um den responsiven Offcanvas-Schalter anzuzeigen.
Responsive Offcanvas

Dies ist Inhalt innerhalb einer .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>

Responsive Offcanvas-Klassen sind für jeden Haltepunkt verfügbar.

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

Platzierung

Es gibt keine Standardplatzierung für Offcanvas-Komponenten, daher müssen Sie eine der folgenden Modifikatorklassen hinzufügen.

  • .offcanvas-startplatziert offcanvas auf der linken Seite des Ansichtsfensters (siehe oben)
  • .offcanvas-endplatziert offcanvas rechts vom Ansichtsfenster
  • .offcanvas-topplatziert offcanvas oben im Ansichtsfenster
  • .offcanvas-bottomplatziert offcanvas am unteren Rand des Ansichtsfensters

Probieren Sie die oberen, rechten und unteren Beispiele unten aus.

Offcanvas-Oberteil
...
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 richtig
...
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-Unterseite
...
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>

Barrierefreiheit

Da das Offcanvas-Bedienfeld konzeptionell ein modales Dialogfeld ist, stellen Sie sicher, dass Sie aria-labelledby="..."—unter Bezugnahme auf den Offcanvas-Titel— hinzufügen .offcanvas. Beachten Sie, dass Sie es nicht hinzufügen müssen, role="dialog"da wir es bereits über JavaScript hinzufügen.

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwendet offcanvas jetzt lokale CSS-Variablen .offcanvasfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

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

Verwendungszweck

Das Offcanvas-Plugin verwendet einige Klassen und Attribute, um das schwere Heben zu bewältigen:

  • .offcanvasverbirgt den Inhalt
  • .offcanvas.showzeigt den Inhalt
  • .offcanvas-startverbirgt die Offcanvas auf der linken Seite
  • .offcanvas-endverbirgt die Offcanvas auf der rechten Seite
  • .offcanvas-topverbirgt die Offcanvas auf der Oberseite
  • .offcanvas-bottomverbirgt die Offcanvas auf der Unterseite

Fügen Sie eine Schaltfläche zum Schließen mit dem data-bs-dismiss="offcanvas"Attribut hinzu, das die JavaScript-Funktionalität auslöst. Stellen Sie sicher, dass Sie das <button>Element damit verwenden, um ein korrektes Verhalten auf allen Geräten zu gewährleisten.

Über Datenattribute

Umschalten

Fügen Sie data-bs-toggle="offcanvas"und ein data-bs-targetoder hrefzum Element hinzu, um automatisch die Steuerung eines Offcanvas-Elements zuzuweisen. Das data-bs-targetAttribut akzeptiert einen CSS-Selektor, auf den Offcanvas angewendet werden soll. Achten Sie darauf, die Klasse offcanvasdem offcanvas-Element hinzuzufügen. Wenn Sie möchten, dass es standardmäßig geöffnet ist, fügen Sie die zusätzliche Klasse hinzu show.

Zurückweisen

Die Entlassung kann mit dem dataAttribut auf einer Schaltfläche innerhalb der Offcanvas erreicht werden, wie unten gezeigt:

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

oder auf einer Schaltfläche außerhalb des Offcanvas , indem Sie data-bs-targetwie unten gezeigt Folgendes verwenden:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Obwohl beide Möglichkeiten zum Schließen eines Offcanvas unterstützt werden, denken Sie daran, dass das Schließen eines Offcanvas von außerhalb nicht dem Dialogmuster (modal) des ARIA Authoring Practices Guide entspricht . Tun Sie dies auf eigene Gefahr.

Über JavaScript

Manuell aktivieren mit:

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

Optionen

Da Optionen über Datenattribute oder JavaScript übergeben werden können, können Sie einen Optionsnamen data-bs-wie in anhängen data-bs-animation="{value}". Stellen Sie sicher, dass Sie den Falltyp des Optionsnamens von " camelCase " in " kebab -case " ändern, wenn Sie die Optionen über Datenattribute übergeben. Verwenden Sie beispielsweise data-bs-custom-class="beautifier"anstelle von data-bs-customClass="beautifier".

Ab Bootstrap 5.2.0 unterstützen alle Komponenten ein experimentelles reserviertes Datenattribut, das eine data-bs-configeinfache Komponentenkonfiguration als JSON-String enthalten kann. Wenn ein Element über data-bs-config='{"delay":0, "title":123}'und data-bs-title="456"-Attribute verfügt, ist der endgültige titleWert 456und die separaten Datenattribute überschreiben die auf angegebenen Werte data-bs-config. Darüber hinaus können vorhandene Datenattribute JSON-Werte wie data-bs-delay='{"show":0,"hide":150}'.

Name Typ Standard Beschreibung
backdrop boolean oder die Zeichenfolgestatic true Wenden Sie einen Hintergrund auf den Körper an, während Offcanvas geöffnet ist. Geben Sie alternativ staticeinen Hintergrund an, der die Offcanvas nicht schließt, wenn er angeklickt wird.
keyboard boolesch true Schließt die Offcanvas, wenn die Escape-Taste gedrückt wird.
scroll boolesch false Scrollen des Körpers zulassen, während Offcanvas geöffnet ist.

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

Aktiviert Ihren Inhalt als Offcanvas-Element. Akzeptiert optionale Optionen object.

Sie können eine Offcanvas-Instanz mit dem Konstruktor erstellen, zum Beispiel:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Methode Beschreibung
getInstance Statische Methode, mit der Sie die Offcanvas-Instanz abrufen können, die einem DOM-Element zugeordnet ist.
getOrCreateInstance Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Offcanvas-Instanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde.
hide Blendet ein Offcanvas-Element aus. Gibt an den Aufrufer zurück, bevor das Offcanvas-Element tatsächlich ausgeblendet wurde (dh bevor das hidden.bs.offcanvasEreignis eintritt).
show Zeigt ein Offcanvas-Element an. Gibt an den Aufrufer zurück, bevor das Offcanvas-Element tatsächlich angezeigt wurde (dh bevor das shown.bs.offcanvasEreignis eintritt).
toggle Schaltet ein Offcanvas-Element ein oder aus. Gibt an den Aufrufer zurück, bevor das Offcanvas-Element tatsächlich angezeigt oder ausgeblendet wurde (dh bevor das shown.bs.offcanvasor - hidden.bs.offcanvasEreignis eintritt).

Veranstaltungen

Die Offcanvas-Klasse von Bootstrap macht einige Ereignisse verfügbar, um sich in die Offcanvas-Funktionalität einzuklinken.

Ereignistyp Beschreibung
hide.bs.offcanvas Dieses Ereignis wird sofort ausgelöst, wenn die hideMethode aufgerufen wurde.
hidden.bs.offcanvas Dieses Ereignis wird ausgelöst, wenn ein Offcanvas-Element vor dem Benutzer verborgen wurde (wartet, bis die CSS-Übergänge abgeschlossen sind).
hidePrevented.bs.offcanvas Dieses Ereignis wird ausgelöst, wenn das Offcanvas angezeigt wird, sein Hintergrund angezeigt wird staticund ein Klick außerhalb des Offcanvas ausgeführt wird. Das Ereignis wird auch ausgelöst, wenn die Escape-Taste gedrückt wird und die keyboardOption auf gesetzt ist false.
show.bs.offcanvas Dieses Ereignis wird sofort ausgelöst, wenn die showInstanzmethode aufgerufen wird.
shown.bs.offcanvas Dieses Ereignis wird ausgelöst, wenn ein Offcanvas-Element für den Benutzer sichtbar gemacht wurde (wartet auf den Abschluss der CSS-Übergänge). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})