SlideOver

Represents an aditional session that complements the screen's information.

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

Example

Code

Open Partial

Open Full

Usage


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

To apply styles, include the following in your stylesheet:


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

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)`

You can target and override SlideOver styles using the following data attributes:

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

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
onEntered	`() => void`	Callback function when the modal is opened.
disableEscapeKeyDown	`false \| true`	Disable being closed using the Escape key.

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.

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