Schwebender Filter-Button
Ein runder, schwebender Button, der sich in ein kleines Filterpanel verwandelt. Die Optionen gleiten nacheinander herein.
Einstellungen
Code
<div class="uv-fmf"><div class="ph"><div class="body"><span></span><span></span><span></span><span></span></div><div class="fb"><button class="tg"><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></button><div class="pn"><div class="tt">Filtern nach</div><button style="--i:0"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Niedriger Preis</button><button style="--i:1"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Am besten bewertet</button><button style="--i:2"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>In meiner Nähe</button><button style="--i:3"><span class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span>Verfügbar</button></div></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
Sinnvoll, wenn der Bildschirm vor allem Inhalt zeigt und Filter nur ab und zu gebraucht werden. Ein Verzeichnis für Coworking-Spaces etwa, in dem man durch Einträge scrollt und nur manchmal Günstig, Top bewertet, In der Nähe oder Verfügbar wählt. Der Button wartet in der Ecke, bis jemand ihn braucht. Bekannt als Floating Action Button.
Ein schwebender Button kann das letzte Listenelement verdecken, gib dem Inhalt also unten etwas Abstand. Mehr als vier oder fünf Optionen gehören in ein richtiges Bottom Sheet. Ein Tipp daneben sollte das Panel schließen, so wie hier.