Bottom Sheet mit Filtern
Ein Panel, das mit Griff von unten hochfährt, mit aufklappbaren Bereichen und einem Anwenden-Button mit Zähler.
Einstellungen
Code
<div class="uv-fmh"><div class="ph"><button class="op"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg> Filter</button><div class="ov"></div><div class="sh"><span class="gr"></span><div class="ac open"><button class="hd">Kategorie<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Design</button><button class="op2">Code</button><button class="op2">Fotos</button></div></div><div class="ac"><button class="hd">Preis<i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="bd"><button class="op2">Niedrig</button><button class="op2">Mittel</button><button class="op2">Hoch</button></div></div><button class="ap">Anwenden <b class="n">0</b></button></div></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Wofür du ihn nutzen kannst
Auf dem Handy ist ein Bottom Sheet der angenehmste Ort für alle Filter. Denk an einen Second-Hand-Marktplatz, auf dem man nach Kategorie, Preis und Zustand filtert. Die Bereiche klappen zu, damit das Panel nicht zu hoch wird, und der Anwenden-Button zeigt, wie viele Optionen gewählt sind. Auch bekannt als mobiler Filter-Drawer.
Lass Nutzer das Panel durch Tippen auf den abgedunkelten Hintergrund schließen, wie in der Demo. Der Anwenden-Button gehört immer sichtbar nach unten. Hast du nur zwei oder drei Filter, reichen Chips über der Liste, das spart Tipps.