FilterSlider
The mobile Filter
view that is rendered inside a SlideOver
component.
The mobile
Filter
view that is rendered inside a SlideOver
component.The FilterSlider
component is a compound of the following:FilterSlider
:SlideOver
that wraps theFilter
for small screen dimensions.Filter
: wraps anAccordion
along with the component title.FilterFacets
: wraps anAccordionItem
with itsAccordionButton
and anAccordionPanel
for every Facet.FilterFacetBoolean
: wraps the list of theFilterFacetBooleanItem
.FilterFacetBooleanItem
: wraps aCheckbox
with itsLabel
and theBadge
that represents the child of theFilterFacetBoolean
.FilterFacetRange
: wraps aPriceRange
for a given Facet with the Range type.
Example
Code
Usage
Import the component
_10import {_10 FilterSlider,_10 Filter,_10 FilterFacets,_10 FilterFacetBoolean,_10 FilterFacetBooleanItem,_10 FilterFacetRange,_10} from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
For details, see Importing FastStore UI component styles.
Design tokens
Nested Elements
Content
Local token | Default value/Global token linked |
---|---|
--fs-filter-slider-content-height | calc(100vh - var(--fs-filter-slider-footer-height)) |
--fs-filter-slider-content-padding | var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3)) |
Title
Local token | Default value/Global token linked |
---|---|
--fs-filter-slider-title-font-size | var(--fs-text-size-4) |
--fs-filter-slider-title-font-weight | var(--fs-text-weight-bold) |
--fs-filter-slider-title-line-height | 1.12 |
Footer
Local token | Default value/Global token linked |
---|---|
--fs-filter-slider-footer-width | 100% |
--fs-filter-slider-footer-height | 5rem |
--fs-filter-slider-footer-padding | var(--fs-spacing-3) |
--fs-filter-slider-footer-bkg-color | var(--fs-color-neutral-0) |
--fs-filter-slider-footer-box-shadow | 0 0 6px rgb(0 0 0 / 20%) |
Footer Buttons
Local token | Default value/Global token linked |
---|---|
--fs-filter-slider-footer-button-clear-width | 40% |
--fs-filter-slider-footer-button-clear-margin-right | var(--fs-spacing-3) |
--fs-filter-slider-footer-button-apply-width | 60% |
Data attributes
You can target and override
FilterSlider
styles using the following data attributes:data-fs-filter-slider
data-fs-filter-slider-content
data-fs-filter-slider-title
data-fs-filter-slider-footer
data-fs-filter-slider-footer-button-apply
data-fs-filter-slider-footer-button-clear
Props
FilterSlider
Name | Type | Description | Default |
---|