API drawer

an optional Drawer config

a DrawerWidget

DrawerContext

The context containing the state and properties for the Drawer component.

Element

The JSX element representing the default slot structure of the Drawer.

Partial<DrawerProps> & object

The properties for the Drawer component.

Element

The rendered Drawer component.

The Drawer component uses the useWidget hook to create a widget context with the provided configuration. It renders the slot content using the Slot component.

close: () => void

Trigger the closing of the drawer.

void

open: () => void

Trigger the opening of the drawer.

void

backdropDirective: Directive

Directive to put on the backdrop DOM element.

backdropPortalDirective: Directive

Portal directive to put on the backdrop DOM element.

containerDirective: Directive

Directive to put on the container DOM element in order for the drawer to size correctly.

drawerDirective: Directive

Directive to put on the drawer DOM element.

drawerPortalDirective: Directive

Portal directive to put on the drawer DOM element.

splitterDirective: Directive

Directive to put on the splitter DOM element.

animated: boolean

If true opening and closing will be animated.

true

ariaDescribedBy: string

aria-describedby attribute to use for the drawer element.

''

ariaLabelledBy: string

aria-labelledby attribute to use for the drawer element.

''

backdrop: boolean

If true displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable

true

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropTransition: TransitionFn

The transition to use for the backdrop behind the drawer (if present).

fadeTransition

bodyScroll: boolean

If true allows body scrolling when the drawer is open.

false

children: SlotContent<DrawerContext>

Template for the drawer body

className: string

CSS classes to be applied on the widget main container

'w-full'

container: HTMLElement | null

Which element should contain the drawer and backdrop DOM elements. If it is not null, the drawer and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

focusOnInit: boolean

If true focuses the drawer when it is opened.

true

header: SlotContent<DrawerContext>

Template for the drawer header

onHidden: () => void

Event to be triggered when the transition is completed and the drawer is not visible.

void

() => {}

onMaximizedChange: (isMaximized) => void

Event to be triggered when the maximized state changes.

boolean

void

() => {}

onMinimizedChange: (isMinimized) => void

Event to be triggered when the minimized state changes.

boolean

void

() => {}

onResizingChange: (isResizing) => void

Event to be triggered when the user starts or stops resizing the drawer.

boolean

void

() => {}

onShown: () => void

Event to be triggered when the transition is completed and the drawer is visible.

void

() => {}

onSizeChange: (size) => void

An event emitted when the drawer size changes (width or height depending on the orientation).

Event payload is equal to the newly selected width or height.

number | null

void

() => {}

onVisibleChange: (visible) => void

Event to be triggered when the visible property changes.

boolean

new value of the visible propery

void

() => {}

resizable: boolean

If true, the drawer can be resized by the user.

false

size: number | null

Size of the drawer in pixel once the user start interacting. It corresponds to the height or the width depending on the drawer orientation

null

structure: SlotContent<DrawerContext>

Global template for the drawer component

transition: TransitionFn

The transition function will be executed when the drawer is displayed or hidden.

collapseHorizontalTransition

verticalTransition: TransitionFn

The transition function for vertically positioned drawer (top, bottom) that will be executed when the drawer is displayed or hidden.

collapseVerticalTransition

visible: boolean

If true, the drawer is shown; otherwise, it is hidden.

false

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropHidden: boolean

Whether the backdrop is fully hidden. This can be true either because backdrop is false or because visible is false and there is no current transition.

children: SlotContent<DrawerContext>

Template for the drawer body

className: string

CSS classes to be applied on the widget main container

'w-full'

container: HTMLElement | null

Which element should contain the drawer and backdrop DOM elements. If it is not null, the drawer and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

header: SlotContent<DrawerContext>

Template for the drawer header

hidden: boolean

Flag to show whether the drawer is fully hidden.

isVertical: boolean

Flag to show whether the drawer is vertically positioned.

resizable: boolean

If true, the drawer can be resized by the user.

false

size: number | null

Size of the drawer in pixel once the user start interacting. It corresponds to the height or the width depending on the drawer orientation

null

structure: SlotContent<DrawerContext>

Global template for the drawer component

visible: boolean

If true, the drawer is shown; otherwise, it is hidden.

false

DrawerProps

the default Drawer config