Filterleiste mit aktiven Tags
Dropdowns oben, jede Auswahl wird darunter zu einem entfernbaren Tag, das animiert erscheint und verschwindet.
Einstellungen
Code
<div class="uv-ftb"><div class="rw"><div class="dd"><button class="tg">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="mn"><button data-v="Design">Design</button><button data-v="Code">Code</button><button data-v="Fotos">Fotos</button></div></div><div class="dd"><button class="tg">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="mn"><button data-v="Kostenlos">Kostenlos</button><button data-v="Premium">Premium</button></div></div><div class="dd"><button class="tg">Level<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="mn"><button data-v="Einfach">Einfach</button><button data-v="Erweitert">Erweitert</button></div></div></div><div class="tags"></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
Ein gutes Layout für Kataloge mit breitem Raster, in denen eine Seitenleiste zu viel Platz kosten würde. Etwa eine Plattform für Onlinekurse mit Kategorie, Preis und Level oben in einer Reihe. Jede Auswahl erscheint darunter als Tag, Filter lassen sich also auf einen Blick sehen und zurücknehmen. Passt zur Suche nach einer horizontalen Filterleiste mit Chips.
Lass die Beschriftung der Dropdowns fest, etwa „Level“, und zeig die Werte in den Tags. Ab drei Tags lohnt sich ein Link „Alle entfernen“. Wird die Reihe voll, verschwinden selten genutzte Filter hinter einem Button „Mehr“.