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
Alle ansehen: FilterWofü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.