Facets List Component
- Jordan Kasper (Deactivated)
Owned by Jordan Kasper (Deactivated), created
Overview
The Facets List component displays a list of available facets with a toggle to expand/collapse on mobile devices.
Selector
The selector for this component is <hawksearch-facets-list>.
Data Model
The following data model is exposed to the Handlebars template:
{
facets: Array<Facet>;
expanded: boolean;
}For more information, see Search Models.
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-mobile-toggle | Â |
When an element with this attribute is clicked, the expanded value will be reversed. This is intended to show/hide the list of facets on mobile devices.
Default Template
<div class="facets{{attribute ' facets--expanded' expanded}}">
<div hawksearch-mobile-toggle class="facets__heading">
Narrow Results
<hawksearch-icon name="{{if-else expanded 'chevron-down' 'chevron-right'}}" size="1.5rem" class="facets__heading__mobile-toggle"></hawksearch-icon>
</div>
<div class="facets__content">
{{#each facets}}
<hawksearch-facet-wrapper hawksearch-facet-id="{{id}}"></hawksearch-facet-wrapper>
{{/each}}
</div>
</div>