SlideOver

This component represents an aditional session that complements the screen's information.

Import

Import the component from @faststore/ui


_10import { SlideOver, SlideOverHeader } from '@faststore/ui'

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


_10@import '@faststore/ui/src/components/organisms/SlideOver/styles.scss';

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

Example

Code

Open Partial

Open Full

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-slide-over`
isOpen*	`false \| true`	A boolean value that represents the state of the SlideOver
direction	`"leftSide" \| "rightSide"`	Represents the side that the SlideOver comes from.	`leftSide`
size	`"full" \| "partial"`	Represents the size of the SlideOver.	`full`
fade	`"in" \| "out"`	Represents the fade effect of the SlideOver.	`out`
children*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Children or function as a children
overlayProps	`Props`	Props forwarded to the `Overlay` component.
onDismiss	`() => void`	This function is called whenever the user clicks outside. the modal content
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby

Name	Type	Description	Default
children*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A react component to be used as the title in the header.
closeBtnProps	`Partial<Omit<IconButtonProps, "onClick">>`	Props for the Close Button component.	`{}`
onClose*	`() => void`	Function called when Close Button is clicked.

Local token	Default value/Global token linked
`--fs-slide-over-bkg-color`	`var(--fs-color-body-bkg)`
`--fs-slide-over-transition-timing`	`var(--fs-transition-timing)`

Local token	Default value/Global token linked
`--fs-slide-over-header-padding`	`var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2)`
`--fs-slide-over-header-bkg-color`	`var(--fs-color-neutral-0)`

Local token	Default value/Global token linked
`--fs-slide-over-partial-gap`	`calc(2 * var(--fs-grid-padding))`
`--fs-slide-over-partial-width-mobile`	`calc(100vw - var(--fs-slide-over-partial-gap))`

`--fs-slide-over-partial-width-notebook`	`calc(100% / 3)`
`--fs-slide-over-partial-max-width-notebook`	`calc(var(--fs-grid-breakpoint-notebook) / 3)`

data-fs-slide-over

data-fs-slide-over-size="full" | "partial"

data-fs-slide-over-state="in" | "out"

data-fs-slide-over-header

data-fs-slide-over-header-icon

Cart Sidebar
The CartSidebar displays the summary of items added to the cart along with detailed information, and checkout option.
See more
Filter Slider
The mobile Filter view that is rendered inside a SlideOver component.
See more