Overview
The Tabs component is used to segment search results by item type, often products and content.
Selector
The selector for this component is <hawksearch-tabs>.
Data Model
The Facet data model is exposed to the Handlebars template. For more information, see Search Models.
type FacetType =
| 'checkbox'
| 'color'
| 'date-range'
| 'link'
| 'numeric-range'
| 'range-slider'
| 'recent-searches'
| 'related-searches'
| 'search'
| 'size'
| 'tabs'
| 'unsupported';
interface FacetValueColor {
name: string;
hex?: string;
imageUrl?: string;
}
interface FacetValue {
title: string;
imageUrl?: string;
value?: string;
color?: FacetValueColor;
count?: number;
level?: number;
selected?: boolean;
excluded?: boolean;
children?: Array<FacetValue>;
}
interface FacetRange<T> {
type: string;
min: T;
max: T;
start: T;
end: T;
}
interface DateFacetRange extends FacetRange<Date> {
type: 'date';
}
interface NumericFacetRange extends FacetRange<number> {
type: 'numeric';
}
interface Facet {
id: number;
type: FacetType;
title: string;
values?: Array<FacetValue>;
field: string;
collapsible: boolean;
collapsed?: boolean;
range?: DateFacetRange | NumericFacetRange;
searchable?: boolean;
searchWithin?: string;
tooltip?: string;
truncateThreshold?: number;
visible: boolean;
}
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-tab-value |
|
When an element with this attribute is clicked, the specified tab facet value will be selected and the search results will update.
Default Template
<ul class='tabs{{attribute " tabs--list" (gt values.length 4)}}'>
{{#each values}}
<li class='tabs__item{{attribute " tabs__item--selected" selected}}' hawksearch-tab-value={{value}}>{{title}} ({{count}})</li>
{{/each}}
</ul>