Facettierung Form
Facettierung example
Für eine Suche wird oft ein Filter oder auch Facettierung benötigt. Hierfür kann das Modul Faceting form genutzt werden, das in einem festen Rahmen eine hohe Flexibilität bietet um eine Facettierung darzustellen.
Die Facettierung selbst besteht aus zwei Einheiten, dem Filter Button, siehe 1) und dem Form Container, siehe 2).
Für die Struktur der Seite, die die Suche und Facettierung beinhaltet empfiehlt sich folgende Struktur:
<div class="row">
<div class="span4">
<!-- hier Facettierung einfügen -->
</div>
<div class="span8">
<!-- hier Suchergebnisliste einfügen -->
</div>
</div> 1) Filter Button
Der Button wird nur in der mobilen Version eingeblendet, muss aber im Markup immer an der korrekten Stelle eingefügt sein. Hier muss in das data-containerid Attribut die ID des Form Container eingetragen werden, damit die korrekte Zuordnung erfolgen kann.
<button type="button" class="button button--filter js-facetingform-toggler" data-containerid="my_facetingform_example_01">Filter</button>
2) Form Container
Der Form Container wird in der Desktop Version immer eingeblendet und in der mobilen Version nur nach Klick auf den entsprechenden Button in einem Flyin Overlay. Die Einheiten innerhalb des Form Containers sind durch Fieldsets gruppiert.
<div class="modul-facetingform js-facetingform" id="my_facetingform_example_01">
<div class="facetingform__container">
<div class="container__head">
<h2 class="title">Facettierung example</h2>
</div>
<div class="container__body">
<!-- Form start -->
<form class="facets">
<fieldset class="facet">
<legend class="facet__head">
<span class="facet-title">Legende</span>
</legend>
<div class="facet__body"> <div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox1230" name="myCheckbox1230">
<label class="form-check-label" for="myCheckbox1230">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox6572" name="myCheckbox6572">
<label class="form-check-label" for="myCheckbox6572">Checkbox</label>
</div>
</div> </fieldset>
<fieldset class="facet">
<legend class="facet__head">
<span class="facet-title">Legende</span>
</legend>
<div class="facet__body"> <div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox8110" name="radioset1">
<label class="form-check-label" for="myCheckbox8110">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="myCheckbox5052" name="radioset1">
<label class="form-check-label" for="myCheckbox5052">Checkbox</label>
</div>
</div> </fieldset>
<div class="form-actions">
<div class="form-actions__left">
<button type="reset" class="link reset">zurücksetzen</button>
</div>
<div class="form-actions__right">
<button type="submit" class="button button--light">Jetzt filtern</button>
</div>
</div>
</form>
<!-- Form end -->
</div>
</div>
</div> Optional Inhalte des Form containers
Abgesehen von den Elementen aus Forms stehen für die Facettierung noch weitere spezialisierte Inhalte zur Verfügung.
Collapsible Fieldsets
Fieldsets können mit einem Button getoggelt werden. Der data-collapsible-trigger aktiviert den Toggler und setzt den initialen Status (opened|closed). Der aria-controls Wert enthällt die id des zu toggelnden Containers.
Collapible fieldsets
<legend class="facet__head">
<button data-collapsible-trigger="opened" class="facet-title" type="button" aria-controls="myfacetbody01">
<span class="text">Click me</span>
</button>
</legend>
<div class="facet__body" id="myfacetbody01">
[...]
</div> Collapsible form elements
Durch den .hidden-facet-entries-Wrapper können Teile in langen Formularen ausgeblendet werden. Dieser Container erhällt eine eindeutige Id. Danach folgt ein Button, der diesen Container toggelt.
Collapsible form elements
<div class="hidden-facet-entries" id="myhiddenentries01">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox7243" name="myCheckbox7243">
<label class="form-check-label" for="myCheckbox7243">Checkbox</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="myCheckbox9443" name="myCheckbox9443">
<label class="form-check-label" for="myCheckbox9443">Checkbox</label>
</div>
</div> <button data-collapsible-trigger="closed" aria-controls="myhiddenentries01" type="button" class="facet-entries-toggler" data-closetext="Weniger anzeigen" data-opentext="Mehr anzeigen" ><span class="text">Mehr anzeigen</span></button>
Legend helptext
Ein Fragezeichen kann zur Beschreibung einer Legende eingesetzt werden. Diese wird bei Klick in einem Overlay angezeigt.
Legend helptext
<legend class="facet__head">
<span class="facet-title">Legend with helptext</span>
<span tabindex="0"
role="button"
class="js-formhelp-flyin-overlay qmark-icon"
title="Ich bin ein kurzer Hilfetext."
aria-label="Öffnet Overlay mit Hilfetext"
data-auralopentext="Öffnet Overlay mit Hilfetext"
data-auralclosetext="Schließt Overlay mit Hilfetext">
?
</span>
</legend>
<legend class="facet__head">
<button data-collapsible-trigger="opened" class="facet-title" type="button" aria-controls="myfacetbodyid">
<span class="text">Collapsible legend with helptext</span>
<span tabindex="0"
role="button"
class="js-formhelp-flyin-overlay qmark-icon"
title="Ich bin ein kurzer Hilfetext."
aria-label="Öffnet Overlay mit Hilfetext"
data-auralopentext="Öffnet Overlay mit Hilfetext"
data-auralclosetext="Schließt Overlay mit Hilfetext">
?
</span>
</button>
</legend>