Drawer
ExpandCollapse
Sidebar Menu with a Drawer and State
This example shows how to create a sidebar menu with a drawer. The drawer is opened by clicking a button. The drawer contains links to different sections of the page. When a link is clicked the drawer closes and the page scrolls to the section.
The rx.drawer.root component has an open prop that is set by the state variable is_open. Setting the modal prop to False allows the user to interact with the rest of the page while the drawer is open and allows the page to be scrolled when a user clicks one of the links.
Test1
Test2
ExpandCollapse
API Reference
rx.drawer.root
The Root component of a Drawer, contains all parts of a drawer.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child. |
default_open | bool | The open state of the drawer when it is initially rendered. Use when you do not need to control its open state. |
open | bool | Whether the drawer is open or not. |
modal | bool | When |
direction | "top""right""bottom""left" | Direction of the drawer. This adjusts the animations and the drag direction. |
dismissible | bool | When |
handle_only | bool | When |
snap_points | Union[Sequence, NoneType] | 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. |
scroll_lock_timeout | int | Duration for which the drawer is not draggable after scrolling content inside of the drawer. |
prevent_scroll_restoration | bool | When |
should_scale_background | bool | Enable background scaling, it requires container element with |
close_threshold | float | Number between 0 and 1 that determines when the drawer should be closed. |
rx.drawer.trigger
The button that opens the dialog.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool |
Event Triggers
See the full list of default event triggersrx.drawer.overlay
A layer that covers the inert portion of the view when the dialog is open.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child. |
Event Triggers
See the full list of default event triggersrx.drawer.portal
Portals your drawer into the body.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child. |
Event Triggers
See the full list of default event triggersrx.drawer.content
Content that should be rendered in the drawer.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child. |
rx.drawer.close
A button that closes the drawer.
Props
| Prop | Type | Description |
|---|---|---|
as_child | bool |