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.

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

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.

...

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

...

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

...

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

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

.....

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">Backdroped 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 nichts hinzufügen müssenrole="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;

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

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

Ü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.offcanvas`or - `hidden.bs.offcanvas`Ereignis 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.offcanvas`Ereignis 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.offcanvas`Ereignis 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 `show`Instanzmethode 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 `hide`Methode 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...
})

Leinwand

Wie es funktioniert

Beispiele

Offcanvas-Komponenten

Leinwand

Live-Demo

Leinwand

Platzierung

Offcanvas-Oberteil

Offcanvas richtig

Offcanvas-Unterseite

Hintergrund

Farbig mit Scrollen

Offcanvas mit Hintergrund

Hintergrund mit Scrollen

Barrierefreiheit

Sass

Variablen

Verwendungszweck

Über Datenattribute

Über JavaScript

Optionen

Methoden

Asynchrone Methoden und Übergänge

Veranstaltungen