Overview

The Color Facet component renders a box with color preview for each value.

Selector

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

Data Model

The following data model is exposed to the Handlebars template:

interface ColorFacetValue extends FacetValue {
    visible: boolean;
}

{
  values: Array<ColorFacetValue>;
  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="color-facet">
    <div class="row row--tight color-facet__items">
        {{#each values}}
            {{#if visible}}
                <div hawksearch-facet-value="{{value}}" class="column column--2 color-facet__item{{attribute ' color-facet__item--selected' selected}}">
                    {{#if color.imageUrl}}
                        <img src="{{color.imageUrl}}" class="color-facet__item__image" alt="{{color.name}}" title="{{color.name}}" />
                    {{else}}
                        <div class="color-facet__item__box" style="background: {{color.hex}};"></div>
                    {{/if}}
                    <span class="color-facet__item__actions">
                        {{#if excluded}}
                            <span hawksearch-facet-value-include="{{value}}" class="color-facet__item__actions__item" title="Include">
                                <hawksearch-icon name="plus"></hawksearch-icon>
                            </span>
                        {{else}}
                            <span hawksearch-facet-value-exclude="{{value}}" class="color-facet__item__actions__item" title="Exclude">
                                <hawksearch-icon name="minus"></hawksearch-icon>
                            </span>
                        {{/if}}
                    </span>
                </div>
            {{/if}}
        {{/each}}
    </div>
    {{#if showToggle}}
        <span hawksearch-facet-toggle class="link facet__toggle">{{toggleText}}</span>
    {{/if}}
</div>

Hawksearch Handlebars UI

Color Facet Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Default Template

Related content