VelinStyle Setup · Teil 15
Sheet, Drawer und Accordion
Serie VelinStyle Setup · 15/28
Bauen Sie Side-Panels und Akkordeons für längere Inhalte und mobile Flows.
Voraussetzungen
Web Components Basics — Schwierigkeit: intermediate.
Was Sie in diesem Teil erreichen
Sheet, Drawer und Accordion lösen Platzprobleme: lange Inhalte, mobile Filter, Einstellungen. Statt alles in ein Modal zu zwängen, wählen Sie das passende Overlay.
Sie bauen ein Sheet von der Seite, einen Drawer für Navigation und Accordions für FAQs. Dabei achten Sie auf Scroll-Verhalten und Escape/Backdrop.
Das spart Komplexität in App-UIs spürbar.
Sie bauen ein Sheet von der Seite, einen Drawer für Navigation und Accordions für FAQs. Dabei achten Sie auf Scroll-Verhalten und Escape/Backdrop.
Das spart Komplexität in App-UIs spürbar.
Sheet, Drawer und Accordion lösen Platzprobleme: lange Inhalte, mobile Filter, Einstellungen. Statt alles in ein Modal zu zwängen, wählen Sie das passende Overlay.
Sie bauen ein Sheet von der Seite, einen Drawer für Navigation und Accordions für FAQs. Dabei achten Sie auf Scroll-Verhalten und Escape/Backdrop.
Das spart Komplexität in App-UIs spürbar.
Lesen Sie die Abschnitte der Reihe nach und setzen Sie die Codebeispiele direkt in Ihrem Scaffold um. Am Ende jedes Kapitels steht eine Checkliste — erst abhaken, dann weiter.
Sie bauen ein Sheet von der Seite, einen Drawer für Navigation und Accordions für FAQs. Dabei achten Sie auf Scroll-Verhalten und Escape/Backdrop.
Das spart Komplexität in App-UIs spürbar.
Lesen Sie die Abschnitte der Reihe nach und setzen Sie die Codebeispiele direkt in Ihrem Scaffold um. Am Ende jedes Kapitels steht eine Checkliste — erst abhaken, dann weiter.
Kontext und typische Fehler
Typische Fehler in „Sheet, Drawer und Accordion“ entstehen durch unvollständige Imports, doppelte CSS-Quellen oder fehlende Accessibility-Attribute. Gehen Sie systematisch vor: erst Struktur, dann Styles, dann Interaktion.
Wenn etwas nicht greift, prüfen Sie DevTools (Computed Styles, Console, Netzwerk) bevor Sie weitere Klassen stapeln.
Wenn etwas nicht greift, prüfen Sie DevTools (Computed Styles, Console, Netzwerk) bevor Sie weitere Klassen stapeln.
Praktische Umsetzung
Beginnen Sie mit einem minimalen Markup, das nur das aktuelle Muster zeigt. Erweitern Sie erst, wenn das Minimum stabil ist. So bleibt der Diff im Git klein und reviewbar.
Dokumentieren Sie Abweichungen von den Docs kurz im README Ihres Projekts — besonders Token-Overrides und Theme-Namen.
Dokumentieren Sie Abweichungen von den Docs kurz im README Ihres Projekts — besonders Token-Overrides und Theme-Namen.
<!-- Beispielstruktur für: Sheet, Drawer und Accordion -->
<section class="velin-container py-4">
<h1 class="h3">Übung: Sheet, Drawer und Accordion</h1>
<p class="velin-lead">Hier Ihr Inhalt aus diesem Kapitel.</p>
</section>Vertiefung und Docs
Checkliste Teil 15
- Beispiel lokal nachgebaut
- Mobile Breakpoint geprüft
- Tastaturbedienbarkeit kurz getestet
- Docs-Link geöffnet und quergelesen
- Fragen/Abweichungen notiert
So gehen Sie vor
-
Lesen
Kapiteltext vollständig lesen und Docs-Link öffnen.
-
Nachbauen
Codebeispiele lokal umsetzen und speichern.
-
Prüfen
Checkliste abarbeiten, Mobile und Tastatur kurz testen.
-
Weiter
Nächstes Serienteil erst starten, wenn die Checkliste grün ist.
Offizielle Dokumentation
Vertiefen Sie „Sheet, Drawer und Accordion“ hier: https://velinstyle.info/docs/components/sheet.html — sowie weitere Leitfäden unter https://velinstyle.info/docs/.
Teil 15 von 28 — als Nächstes der folgende Schritt der VelinStyle-Setup-Serie.
Nächstes Tutorial
Kommentare 0
Noch keine Kommentare. Seien Sie der Erste!