Link List Facet Component

Owned by Jordan Kasper (Deactivated)
Last updated: Nov 02, 2022
2 min read

Overview

The Linked List Facet component renders a hyperlink for each value.

Selector

The selector for this component is <hawksearch-link-list-facet>.

Data Model

The following data model is exposed to the Handlebars template:

interface LinkListFacetValue extends FacetValue { visible: boolean; }
{ values: Array<LinkListFacetValue>; showToggle: boolean; toggleText: string; expanded: boolean | undefined; }

For more information, see Search Models.

Event Binding Attributes

This component supports the following attributes which are common to all Facet Type Components:

Default Template

<div class="link-list-facet"> <ul class="link-list-facet__list"> {{#each values}} {{#if visible}} <li class="link-list-facet__list__item"> <span hawksearch-facet-value="{{value}}" class="link facet__value" tabindex="-1"> {{#if imageUrl}} <img src="{{imageUrl}}" alt="{{title}}" title="{{title}}" class="facet__value__image" /> {{else}} <span class="facet__value__title">{{title}}</span> {{/if}} <span class="facet__value__count">({{count}})</span> </span> </li> {{/if}} {{/each}} </ul> {{#if showToggle}} <span hawksearch-facet-toggle class="link facet__toggle" tabindex="-1">{{toggleText}}</span> {{/if}} </div>