atomic-color-facet (Deprecated)
atomic-color-facet (Deprecated)
A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences).
An atomic-color-facet
displays a facet of the results for the current query as colors.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
|
|
Whether to display the facet values as checkboxes (multiple selection) or boxes (multiple selection). Possible values are 'checkbox', and 'box'. |
|
|
|
|
Specifies a unique identifier for the facet. |
|
|
|
|
The field whose values you want to display in the facet. |
|
|
|
|
Specifies if the facet is collapsed. |
|
|
|
|
The non-localized label for the facet. |
|
|
|
|
The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown. |
|
|
|
|
The sort criterion to apply to the returned facet values. Possible values are 'score', 'alphanumeric', 'occurrences', and 'automatic'. |
|
|
|
|
Whether this facet should contain a search box. When "true", the search is only enabled when more facet values are available. |
|
|
Shadow Parts
Part | Description |
---|---|
|
The button that resets the actively selected facet values. |
|
The clear button icon. |
|
The wrapper for the entire facet. |
|
The button that displays the label and allows to expand/collapse the facet. |
|
The label button icon. |
|
The highlighted query inside the matches labels. |
|
The label indicating there are more matches for the current facet search query. |
|
The label indicating there are no matches for the current facet search query. |
|
The placeholder shown before the first search is executed. |
|
The ripple effect of the component’s interactive elements. |
|
The button to clear the search box of input. |
|
The highlighted query inside the facet values. |
|
The search box submit button. |
|
The search box input. |
|
The show less results button. |
|
The show more results button. |
|
The icons of the show more & show less buttons. |
|
The facet value when display is 'box'. |
|
The facet value checkbox clickable label, available when display is 'checkbox'. |
|
The facet value count, common for all displays. |
|
The facet value label, common for all displays. |
|
The facet values container. |
CSS Custom Content
Name | Description |
---|---|
|
Gap value for facet values, when the display is 'box' |
|
Number of facet values to display per row, when the display is 'box' |
|
Size of the checkbox. |
|
Thickness of the checkbox check. |
|
Gap value for facet values for the Color Facet , when the display is 'box' |
|
Number of facet values for the Color Facet to display per row, when the display is 'box' |
|
The size of the facet search clear icon. |
|
The size of the facet search icon. |