Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Overlay

/

Drawer

rx.drawer.root(
    rx.drawer.trigger(rx.button("Open Drawer")),
    rx.drawer.overlay(),
    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",
)

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

PropTypeDescriptionValues
openbool

Whether the drawer is open or not.

should_scale_backgroundbool

Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.

close_thresholdfloat

Number between 0 and 1 that determines when the drawer should be closed.

snap_pointsList

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_indexint

Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.

scroll_lock_timeoutint

Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms

modalbool

When False, it allows to interact with elements outside of the drawer without closing it. Defaults to True.

directionLiteral

Direction of the drawer. Defaults to "bottom"

preventScrollRestorationbool

When True, it prevents scroll restoration. Defaults to True.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

TriggerDescription
on_open_change

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

The button that opens the dialog.

PropTypeDescriptionValues
as_childbool

Defaults to true, if the first child acts as the trigger.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

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

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

Portals your drawer into the body.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

Content that should be rendered in the drawer.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

TriggerDescription
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.

A button that closes the drawer.

PropTypeDescriptionValues
as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

← DialogDropdownmenu →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting