⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Filter Slider

The mobile Filter view that is rendered inside a SlideOver component.

The FilterSlider component is a compound of the following:

  • FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
  • Filter: wraps an Accordion along with the component title.
  • FilterFacets: wraps an AccordionItem with its AccordionButton and an AccordionPanel for every Facet.
  • FilterFacetBoolean: wraps the list of the FilterFacetBooleanItem.
  • FilterFacetBooleanItem: wraps a Checkbox with its Label and the Badge that represents the child of the FilterFacetBoolean.
  • FilterFacetRange: wraps a PriceRange for a given Facet with the Range type.

Import

Import the component from @faststore/ui

import {
  FilterSlider,
  Filter,
  FilterFacets,
  FilterFacetBoolean,
  FilterFacetBooleanItem,
  FilterFacetRange,
} from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/organisms/FilterSlider/styles.scss';
@import '@faststore/ui/src/components/atoms/Button/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage


Props

Filter Slider

NameTypeDescriptionDefault
titlestringTitle for the FilterSlider component.
direction*"leftSide" | "rightSide"Represents the side that the FilterSlider comes from.
size*"full" | "partial"Represents the size of the FilterSlider.
applyBtnPropsPartial<ButtonProps>Props for the Apply Button from FilterSlider component.
clearBtnPropsPartial<ButtonProps>Props for the Clear Button from FilterSlider component.
overlayPropsPropsProps forwarded to the `Overlay` component.
onClose*() => voidFunction called when Close Button is clicked.

Design Tokens

Nested Elements

Content

Local tokenDefault value/Global token linked
--fs-filter-slider-content-heightcalc(100vh - var(--fs-filter-slider-footer-height))
--fs-filter-slider-content-paddingvar(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3))

Title

Local tokenDefault value/Global token linked
--fs-filter-slider-title-font-sizevar(--fs-text-size-4)
--fs-filter-slider-title-font-weightvar(--fs-text-weight-bold)
--fs-filter-slider-title-line-height1.12

Footer

Local tokenDefault value/Global token linked
--fs-filter-slider-footer-width100%
--fs-filter-slider-footer-height5rem
--fs-filter-slider-footer-paddingvar(--fs-spacing-3)
--fs-filter-slider-footer-bkg-color
var(--fs-color-neutral-0)
--fs-filter-slider-footer-box-shadow0 0 6px rgb(0 0 0 / 20%)

Footer Buttons

Local tokenDefault value/Global token linked
--fs-filter-slider-footer-button-clear-width40%
--fs-filter-slider-footer-button-clear-margin-rightvar(--fs-spacing-3)
--fs-filter-slider-footer-button-apply-width60%

Customization

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