atomic-refine-modal
atomic-refine-modal
This is for:
DeveloperThe atomic-refine-modal
is automatically created as a child of the atomic-search-interface
when the atomic-refine-toggle
is initialized.
When the modal is opened, the class atomic-modal-opened
is added to the body, allowing further customization.
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
|
|
The number of expanded facets inside the refine modal. Remaining facets are automatically collapsed. Using the value |
|
|
|
|
|
|
|
|
|
Shadow Parts
Part | Description |
---|---|
|
The body of the modal, between the header and the footer. |
|
The wrapper around the body. |
|
The button in the header that closes the modal. |
|
The icon of the close button. |
|
The modal’s outermost container. |
|
The wrapper around the content inside the body of the modal. |
|
The button that resets all actively selected facet values. |
|
The section containing facets and the "filters" title. |
|
The footer of the modal. |
|
The button in the footer that closes the modal. |
|
The count inside the button in the footer that closes the modal. |
|
The text inside the button in the footer that closes the modal. |
|
The wrapper around the content inside the footer of the modal, containing the button to view results. |
|
The wrapper with a shadow or background color around the footer. |
|
The header of the modal, containing the title. |
|
The horizontal ruler underneath the header. |
|
The wrapper around the header. |
|
The title for each section. |
|
The |
|
The select dropdown’s sort icon. |
|
The wrapper around the sort icon that’s used to align it. |
|
The wrapper around the select element, used to position the icon. |
|
The title of the modal. |
CSS Custom Content
Name | Description |
---|---|
|
The spacing between the modal’s facets. |