Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Overlay

/

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 rx.chakra.vstack(
        rx.chakra.button(
            "Show Right Drawer", on_click=DrawerState.right
        ),
        rx.chakra.drawer(
            rx.chakra.drawer_overlay(
                rx.chakra.drawer_content(
                    rx.chakra.drawer_header("Confirm"),
                    rx.chakra.drawer_body(
                        "Do you want to confirm example?"
                    ),
                    rx.chakra.drawer_footer(
                        rx.chakra.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

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

A drawer component.

PropTypeDescriptionValues
is_openbool

If true, the modal will be open.

allow_pinch_zoombool

Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to false.

auto_focusbool

If true, the modal will autofocus the first enabled and interactive element within the ModalContent

block_scroll_on_mountbool

If true, scrolling will be disabled on the body when the modal opens.

close_on_escbool

If true, the modal will close when the Esc key is pressed

close_on_overlay_clickbool

If true, the modal will close when the overlay is clicked

is_centeredbool

If true, the modal will be centered on screen.

is_full_heightbool

If true and drawer's placement is top or bottom, the drawer will occupy the viewport height (100vh)

lock_focus_across_framesbool

Enables aggressive focus capturing within iframes. - If true: keep focus in the lock, no matter where lock is active - If false: allows focus to move outside of iframe

placementstr

The placement of the drawer

preserve_scroll_bar_gapbool

If true, a padding-right will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens

return_focus_on_closebool

If true, the modal will return focus to the element that triggered it when it closes.

sizeLiteral

"xs" | "sm" | "md" | "lg" | "xl" | "full"

use_inertbool

A11y: If true, the siblings of the modal will have aria-hidden set to true so that screen readers can only see the modal. This is commonly known as making the other elements inert

variantstr

Variant of drawer

color_schemeLiteral

Color scheme of the Drawer Options: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Event Triggers

TriggerDescription
on_close

The on_close event handler is called when the user closes a form. For example, it is called when the user clicks on a close button.

on_close_complete

The on_close_complete event handler is called when the user closes a form. For example, it is called when the user clicks on a close complete button.

on_esc

The on_esc event handler is called when the user presses the escape key. For example, it is called when the user presses the escape key.

on_overlay_click

The on_overlay_click event handler is called when the user clicks on an overlay. For example, it is called when the user clicks on a overlay button.

Drawer overlay.

Props

No component specific props

Event Triggers

No component specific event triggers

Drawer content.

Props

No component specific props

Event Triggers

No component specific event triggers

Drawer header.

Props

No component specific props

Event Triggers

No component specific event triggers

Drawer body.

Props

No component specific props

Event Triggers

No component specific event triggers

Drawer footer.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting