Mobile Filterleiste
Eine horizontal scrollbare Chip-Reihe mit weichen Rändern und einem festen Filter-Button mit Badge.
Einstellungen
Code
<div class="uv-fms"><div class="ph"><div class="bar"><button class="fx"><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><span class="bd">2</span></button><div class="sc"><button class="on">Alle</button><button class="">In der Nähe</button><button class="">Top</button><button class="">Neu</button><button class="">Günstig</button><button class="">Familie</button><button class="">Pool</button></div></div><div class="body"><span></span><span></span><span></span></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
So sieht es über den Ergebnissen vieler Hotel- und Ferien-Apps aus: In der Nähe, Günstig, Familie, Pool und weitere zur Seite hin. Die ausgeblendeten Ränder deuten an, dass es weitergeht, und der feste Button mit Badge öffnet alle Filter. Zu finden unter horizontale Chip-Leiste oder mobile Filterleiste.
Stell die meistgenutzten Filter nach vorn, denn viele wischen nie durch die Reihe. Das Badge sollte die aktiven Filter aus dem großen Panel zählen, damit niemand vergisst, dass noch etwas eingeschaltet ist. Teste das Ganze mit dem Daumen, nicht mit der Maus.