filterbar

Filtern von Inhalten

Zweck

Das filterbar-Pattern ermöglicht es Besucher:innen unterschiedlichste Inhalte durch vorgefertigte Filter ein- und auszublenden.

filterbar

Zweck (kurz)

Filtern von Inhalten

Zweck

Das filterbar-Pattern ermöglicht es Besucher:innen unterschiedlichste Inhalte durch vorgefertigte Filter ein- und auszublenden.

Felder

  1. Hintergrundfarbe
  2. Überschrift (optional)
  3. Untertitel (optional)
  4. Filter-Wert und -Name
  5. externer Link (optional)
  6. 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.

[id:25]