Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self Hosting

Library

Overlay

Drawer

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open Drawer")),
    rx.drawer.overlay(z_index="5"),
    rx.drawer.portal(
        rx.drawer.content(
            rx.flex(
                rx.drawer.close(rx.box(rx.button("Close"))),
                align_items="start",
                direction="column",
            ),
            top="auto",
            right="auto",
            height="100%",
            width="20em",
            padding="2em",
            background_color="#FFF"
            # background_color=rx.color("green", 3)
        )
    ),
    direction="left",
)

API Reference

DrawerRoot

The Root component of a Drawer, contains all parts of a drawer.

Prop	Type	Description
`open`	bool	Whether the drawer is open or not.
`should_scale_background`	bool	Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
`close_threshold`	float	Number between 0 and 1 that determines when the drawer should be closed.
`snap_points`	List	Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
`fade_from_index`	int	Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
`scroll_lock_timeout`	int	Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
`modal`	bool	When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
`direction`	Literal	Direction of the drawer. Defaults to `"bottom"`
`preventScrollRestoration`	bool	When `True`, it prevents scroll restoration. Defaults to `True`.
`as_child`	bool	Change the default rendered element for the one passed as a child.

Event Triggers

Trigger	Description
`on_open_change`	The on_open_change event handler is called when the open state of the component changes.

DrawerTrigger

The button that opens the dialog.

Prop	Type	Description	Values
`as_child`	bool	Defaults to true, if the first child acts as the trigger.
`as_child`	bool	Change the default rendered element for the one passed as a child.

Event Triggers

See the full list of default event triggers

DrawerOverlay

A layer that covers the inert portion of the view when the dialog is open.

Prop	Type	Description	Values
`as_child`	bool	Change the default rendered element for the one passed as a child.

Event Triggers

See the full list of default event triggers

DrawerPortal

Portals your drawer into the body.

Prop	Type	Description	Values
`as_child`	bool	Change the default rendered element for the one passed as a child.

Event Triggers

See the full list of default event triggers

DrawerContent

Content that should be rendered in the drawer.

Prop	Type	Description	Values
`as_child`	bool	Change the default rendered element for the one passed as a child.

Event Triggers

Trigger	Description
`on_open_auto_focus`	The on_open_auto_focus event handler is called when the component opens and the focus is returned to the first item.
`on_close_auto_focus`	The on_close_auto_focus event handler is called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
`on_escape_key_down`	The on_escape_key_down event handler is called when the escape key is down. It can be prevented by calling event.preventDefault.
`on_pointer_down_outside`	The on_pointer_down_outside event handler is called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
`on_interact_outside`	The on_interact_outside event handler is called when the user interacts outside the component.

DrawerClose

A button that closes the drawer.

Prop	Type	Description	Values
`as_child`	bool	Defaults to true, if the first child acts as the trigger.
`as_child`	bool	Change the default rendered element for the one passed as a child.