Intro

Gallery

Hosting

Learn

Components

Recipes

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	Default Value	Values
`open`	bool
`should_scale_background`	bool
`close_threshold`	float
`snap_points`	List
`fade_from_index`	int
`scroll_lock_timeout`	int
`modal`	bool
`direction`	Literal
`preventScrollRestoration`	bool
`as_child`	bool

Event Triggers

Trigger	Description
`on_open_change`	Fires when the drawer is opened.

DrawerTrigger

The button that opens the dialog.

Prop	Type	Default Value	Values
`as_child`	bool	True
`as_child`	bool

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	Default Value	Values
`as_child`	bool

Event Triggers

See the full list of default event triggers

DrawerPortal

Portals your drawer into the body.

Prop	Type	Default Value	Values
`as_child`	bool

Event Triggers

See the full list of default event triggers

DrawerContent

Content that should be rendered in the drawer.

Prop	Type	Default Value	Values
`as_child`	bool

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.