Bootstrap - Offcanvas: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die wunderbare Welt von Bootstrap's Offcanvas-Komponente. Keine Sorge, wenn ihr neu seid - ich werde dein freundlicher Guide sein, und wir erkunden dieses Thema gemeinsam Schritt für Schritt. Also hole dir dein liebstes Getränk, setze dich bequem hin und lassen uns auf diese aufregende Reise gehen!

Übersicht

Zunächst einmal - was ist eigentlich ein Offcanvas? Stell dir vor, du bist in einer winzigen Wohnung und brauchst mehr Stauraum. Plötzlichgleitet eine versteckte Abteilung von der Wand aus - das ist im Webdesign im Grunde genommen ein Offcanvas! Es ist eine Seitenleiste, die ein- und ausblenden kann, um zusätzlichen Platz für Navigation, Formulare oder anderes Inhalt zu bieten, das du bis zum Bedarf verstecken möchtest.

Offcanvas-Komponenten

Bevor wir anfangen zu bauen, lassen wir uns die Hauptteile eines Offcanvas anschauen:

1. Der Auslöser: Dies ist normalerweise ein Knopf, der, wenn darauf geklickt, den Offcanvas zeigt.
2. Der Offcanvas selbst: Das Paneel, das in das Sichtfeld gleitet.
3. Der Hintergrund: Eine optionale Überlagerung, die den Hauptinhalt abdunkelt, wenn der Offcanvas geöffnet ist.

Nun sehen wir, wie diese Komponenten im Code zusammenkommen!

Live-Demo

Hier ist ein einfaches Beispiel, um loszulegen:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
Offcanvas öffnen
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Titel</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<p>Dies ist der Offcanvas-Inhalt. Hier kannst du alles reinschreiben, was du möchtest!</p>
</div>
</div>

Lassen wir das auseinandernehmen:

1. Der Knopf hat data-bs-toggle="offcanvas", um Bootstrap zu sagen, dass es ein Offcanvas-Auslöser ist.
2. data-bs-target="#demoOffcanvas" verlinkt den Knopf mit dem Offcanvas mit der passenden ID.
3. Der Offcanvas selbst ist ein div mit der Klasse offcanvas.
4. offcanvas-start positioniert ihn auf der linken Seite (wir werden später andere Positionen erkunden).
5. Die Kopfzeile enthält den Titel und einen Schließknopf.
6. Der Hauptteil ist, wo dein Hauptinhalt hineinkommt.

Body-Scrollen

Standardmäßig kann der Hintergrund, wenn ein Offcanvas geöffnet ist, nicht gescrollt werden. Aber was ist, wenn du das Scrollen erlauben möchtest? quite easy! Füge data-bs-scroll="true" zu deinem Offcanvas div hinzu:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Body-Scrollen und Hintergrund

Möchtest du das Scrollen erlauben, aber diesen schicken Hintergrund behalten? Kein Problem! Füge data-bs-backdrop="false" zusammen mit data-bs-scroll="true" hinzu:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Statischer Hintergrund

Wenn du möchtest, dass der Offcanvas bleibt,除非明确关闭（即，点击外面不会关闭它）， verwende data-bs-backdrop="static":

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Dunkler Offcanvas

Fühlst du dich ein bisschen Gothic? Machen wir unseren Offcanvas dunkel! Füge einfach die Klasse text-bg-dark hinzu:

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Responsiv

Hier ist ein cooler Trick - du kannst deinen Offcanvas responsiv machen! Er kann auf kleineren Bildschirmen ein Offcanvas und auf größeren inline-Inhalt sein. Verwende die Klassen .offcanvas-{breakpoint}:

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Dieser Offcanvas wird auf Bildschirmen größer als die 'lg'-Schwelle inline und auf kleineren Bildschirmen ein Offcanvas sein.

Platzierung

Erinnern wir uns, als ich erwähnte, dass wir die Position ändern können? Hier ist wie:

Klasse	Position
offcanvas-start	Links
offcanvas-end	Rechts
offcanvas-top	Oben
offcanvas-bottom	Unten

Zum Beispiel, um den Offcanvas auf der rechten Seite zu platzieren:

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- Offcanvas-Inhalt -->
</div>

Barrierefreiheit

Zuletzt, aber sicherlich nicht am wenigsten, lassen wir uns über den Offcanvas zugänglich für alle Benutzer sprechen:

1. Verwende aria-labelledby, um den Offcanvas mit seinem Titel zu verknüpfen:

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Zugänglicher Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<!-- Offcanvas-Inhalt -->
</div>

2. Verwende aria-controls auf dem Auslöserknopf:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
Zugänglichen Offcanvas öffnen
</button>

Und das war's, Leute! Du bist jetzt ein Offcanvas-Experte. Denke daran, Übung macht den Meister, also habe keine Angst, diese Komponenten in deinen Projekten auszuprobieren. Wer weiß? Vielleicht erstellst du die nächste große schwebende Sensation im Webdesign!

Frohes Coden und möge dein Offcanvas immer glatt gleiten!

Credits: Image by storyset