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>

Hawksearch Handlebars UI

Link List Facet Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content