BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Drawer

Slide-in panel from any screen edge.

Package
@solidiom/drawer
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

Backdropcomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Backdrop(props: DrawerBackdropProps): Element

Props

class?
string
style?
string | CSSProperties

View source

Closecomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Close(props: DrawerCloseProps): Element

Props

aria-label?
string — Accessible label. Required when children are icon-only/non-text.
class?
string
ref?
(el: HTMLButtonElement) => void
style?
string | CSSProperties

children: Element

View source

Contentcomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Content(props: DrawerContentProps): Element

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

Descriptioncomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Description(props: DrawerDescriptionProps): Element

Props

class?
string

children: Element

View source

DrawerBackdropPropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

class?
string
style?
string | CSSProperties

View source

DrawerClosePropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

aria-label?
string — Accessible label. Required when children are icon-only/non-text.
class?
string
ref?
(el: HTMLButtonElement) => void
style?
string | CSSProperties

children: Element

View source

DrawerContentPropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

class?
string
ref?
(el: HTMLDivElement) => void
style?
string | CSSProperties

children: Element

View source

DrawerContextValueinterface

Props

contentId
string
descriptionId
string
dismissible
boolean
modal
boolean
open
Accessor<boolean>
phase
Accessor<PresencePhase>
present
Accessor<boolean>
requestOpenChange
(next: boolean, details: ChangeDetails<DisclosureReason>) => void
shouldScaleBackground
boolean
side
DrawerSide
snapPoints
number[] | undefined
titleId
string
triggerId
string

View source

DrawerDescriptionPropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

class?
string

children: Element

View source

DrawerRootPropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

defaultOpen?
boolean — Default open state (uncontrolled).
dismissible?
boolean — Whether the drawer can be dismissed by swipe/click-outside. Default: true.
modal?
boolean — Whether the drawer is modal. Default: true.
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void — Called when open state change is requested.
open?
Accessor<boolean> — Controlled open state.
shouldScaleBackground?
boolean — Whether the background should scale when drawer opens. Default: false.
side?
DrawerSide — Edge from which the drawer slides. Default: "right".
snapPoints?
number[] — Discrete snap point positions (as percentages 0–100).

children: Element

View source

DrawerSidetype

The edge from which the drawer slides in.

View source

DrawerTitlePropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

class?
string

children: Element

View source

DrawerTriggerPropsinterface

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

Props

aria-label?
string — Accessible label. Required when children are icon-only/non-text.
class?
string
ref?
(el: HTMLButtonElement) => void
style?
string | CSSProperties

children: Element

View source

Rootcomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Root(props: DrawerRootProps): Element

Props

defaultOpen?
boolean — Default open state (uncontrolled).
dismissible?
boolean — Whether the drawer can be dismissed by swipe/click-outside. Default: true.
modal?
boolean — Whether the drawer is modal. Default: true.
onOpenChange?
(open: boolean, details: ChangeDetails<DisclosureReason>) => void — Called when open state change is requested.
open?
Accessor<boolean> — Controlled open state.
shouldScaleBackground?
boolean — Whether the background should scale when drawer opens. Default: false.
side?
DrawerSide — Edge from which the drawer slides. Default: "right".
snapPoints?
number[] — Discrete snap point positions (as percentages 0–100).

children: Element

View source

Titlecomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Title(props: DrawerTitleProps): Element

Props

class?
string

children: Element

View source

Triggercomponent

@solidiom/drawer — Headless slide-in drawer primitive. Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.

                        Trigger(props: DrawerTriggerProps): Element

Props

aria-label?
string — Accessible label. Required when children are icon-only/non-text.
class?
string
ref?
(el: HTMLButtonElement) => void
style?
string | CSSProperties

children: Element

View source