Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

class DrawerState(rx.State):
    show_right: bool = False
    show_top: bool = False

    def top(self):
        self.show_top = not (self.show_top)

    def right(self):
        self.show_right = not (self.show_right)


def drawer_example():
    return rc.vstack(
        rc.button(
            "Show Right Drawer", on_click=DrawerState.right
        ),
        rc.drawer(
            rc.drawer_overlay(
                rc.drawer_content(
                    rc.drawer_header("Confirm"),
                    rc.drawer_body(
                        "Do you want to confirm example?"
                    ),
                    rc.drawer_footer(
                        rc.button(
                            "Close",
                            on_click=DrawerState.right,
                        )
                    ),
                    bg="rgba(0, 0, 0, 0.3)",
                )
            ),
            is_open=DrawerState.show_right,
        ),
    )

Drawer can display from the top, bottom, left, or right. By defualt it displays to the right as seen above

rc.vstack(
    rc.button("Show Top Drawer", on_click=DrawerState.top),
    rc.drawer(
        rc.drawer_overlay(
            rc.drawer_content(
                rc.drawer_header("Confirm"),
                rc.drawer_body(
                    "Do you want to confirm example?"
                ),
                rc.drawer_footer(
                    rc.button(
                        "Close", on_click=DrawerState.top
                    )
                ),
            )
        ),
        placement="top",
        is_open=DrawerState.show_top,
    ),
)

rc.Drawer

A drawer component.

Prop	Type \| Values	Default
`is_open`	`bool`
`allow_pinch_zoom`	`bool`
`auto_focus`	`bool`
`block_scroll_on_mount`	`bool`
`close_on_esc`	`bool`
`close_on_overlay_click`	`bool`
`is_centered`	`bool`
`is_full_height`	`bool`
`lock_focus_across_frames`	`bool`
`placement`	`str`
`preserve_scroll_bar_gap`	`bool`
`return_focus_on_close`	`bool`
`size`	`"sm" \| "md" \| "lg" \| ...`
`use_inert`	`bool`
`variant`	`str`
`color_scheme`	`"none" \| "gray" \| "red" \| ...`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_close`	Fired when the modal is closing.
`on_close_complete`	Fired when the modal is closed and the exit animation is complete.
`on_esc`	Fired when the Esc key is pressed.
`on_overlay_click`	Fired when the overlay is clicked.