Zum Hauptinhalt springen Zur Dokumentennavigation springen
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 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. 
<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

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

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

Hintergrund

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 umzuschalten und data-bs-backdropden Hintergrund umzuschalten.

Farbig mit Scrollen

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

Offcanvas mit Hintergrund

.....

Hintergrund mit Scrollen

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

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

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.

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-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 Methoden zum Schließen eines Offcanvas unterstützt werden, sollten Sie bedenken, dass das Schließen eines Offcanvas von außerhalb nicht mit dem Entwurfsmuster für modale Dialoge von WAI-ARIA übereinstimmt . Tun Sie dies auf eigene Gefahr.

Über JavaScript

Manuell aktivieren mit:

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

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-bs-, wie in data-bs-backdrop="".

Name Typ Standard Beschreibung
backdrop boolesch true Wenden Sie einen Hintergrund auf den Körper an, während Offcanvas geöffnet ist
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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Methode Beschreibung
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).
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).
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).
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

Veranstaltungen

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

Ereignistyp Beschreibung
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).
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). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})