Side Sheet

Last updated: 3.0.0 (04/07/2024)

In Valence 3, this component now imports from @valence-ui/core.

The Side Sheet is best used on desktop devices, thus it is suggested to use the Dynamic Sheet component instead.

The Side Sheet is an aside that can be used to place optional content to the right of the main page's content. It is best used for complex or specific actions that are unsuitable for the primary content on the page.

Usage

import { SideSheet, useDisclosure, Button } from "@valence-ui/app";

function MyComponent() { 
    const disclosure = useDisclosure();

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            > 
                Open sheet!
            </Button>
            
            <SideSheet
                disclosure={disclosure}
                title="I'm a side sheet!"
            >
                // Sheet content...
            </SideSheet>
        </>
    )
}

Position & display type

By default, the Side Sheet will appear to the right of the page on "desktop" breakpoints and larger, pushing the content left if there isn't enough room. On "tablet" breakpoints and smaller, the Side Sheet will become an overlay.

This behavior can be modified using the display prop, where behavior for each breakpoint may be defined.

While in "overlay" display mode, the direction prop can be used to change which side the sheet will appear from, defaulting to "right" if not supplied.

import { SideSheet, useDisclosure, Button } from "@valence-ui/app";

function MyComponent() { 
    const disclosure = useDisclosure();

    return ( 
        <>
            <Button
                onClick={() => disclosure.open()}
            > 
                Open sheet!
            </Button>
            
            <SideSheet
                disclosure={disclosure}
                title="I'm a side sheet!"
                display={{
                    desktop: "overlay", 
                    tablet: "overlay",
                    desktopLarge: "inline",
                }}
                direction="left"
            >
                // Sheet content...
            </SideSheet>
        </>
    )
}

---

Props

Extends GenericSheetProps.

Property	Type	Description
display	SideSheetDisplay	The display option for the sidebar. Defaults to "inline" on desktop and bigger, and "overlay" on mobile and smaller.
direction	"left" | "right"	The direction that this sidebar will appear from. Direction will only be adhered to if the display type is "overlay". Otherwise, it will be "right" by default.
innerFlexProps	FlexProps	Optional props to pass to the inner flex component.

SideSheetDisplay

type SideSheetDisplay = "inline" | "overlay";

---

Changelog

• 3.3.0: now imports from @valence-ui/core.

• 2.2.0: Reworked internal scrolling; added innerFlexProps prop.