filterbar
Zweck (kurz)
Filtern von Inhalten
Zweck
Das filterbar-Pattern ermöglicht es Besucher:innen unterschiedlichste Inhalte durch vorgefertigte Filter ein- und auszublenden.
Felder
- Hintergrundfarbe
- Überschrift (optional)
- Untertitel (optional)
- Filter-Wert und -Name
- externer Link (optional)
- Filterbarer Inhalt (optional)
Dos
- Die zu filternde Liste muss direkt nach der Filterbar folgen
- Die zu filternde Liste sollte direkt nach der Filterbar folgen
- Die zu filternde Liste sollte mehr als 10 Elemente besitzen, da sich ein Filter sonst nicht lohnt
- Minimum von 3 Tags sollten zur Auswahl stehen.
- Das
data-target
Attribut der Liste von Filtern (.filterlist
) muss einen gültigen CSS Selector auf den zu filternden Container besitzen. - Die Elemente dieses Containers benötigen jeweils ein
data-tags
Attribut, welches einen CSV String von tags enthält. - Die einzelnen Filter der Filterbar benötigen ein
data-filter
Attribut, welches den zu filternden tag enthält. - Darüber hinaus gibt es die Möglichkeit einen "Filter" zu definieren, der alle Daten anzeigt (ein Filter ohne
data-filter
Attribut) - Man kann auch einen Standard-Filter definieren (über das
data-default
Attribut des Containers)
Don'ts
Code-Beispiel
Folgendes Beispiel bildet die möglichen Fälle ab:
<section class="filterbar">
<div class="container">
<ol class="filterlist" data-target="#my-container">
<li>Alle anzeigen</li>
<li data-filter="foo">Foo</li>
<li data-filter="baz">Baz</li>
</ol>
</div>
</section>
<ul id="my-container">
<li data-tags="foo,bar">:D</li>
<li data-default data-tags="baz">:|</li>
</ul>
Weitere Infos
- Das Filtern ist case-insensitive.