Drawer

Displays a panel that slides in from the edge of the screen, containing supplementary content.

By default, the drawer can be closed by clicking on the overlay or pressing the Esc key. You can disable this behavior by setting the following properties:

• Set the data-dismissable attribute to false to prevent the drawer from closing when clicking on the overlay.
• Set the data-keyboard-dismiss-disabled attribute to true to prevent the drawer from closing when pressing the Esc key.

The drawer can be placed on any edge of the screen using the placement prop:

• left (default)
• right
• top
• bottom

The backdrop can be either transparent, opaque or blur. The default value is opaque.

• drawer-container: The main slot of the drawer content.
• drawer-wrapper: The wrapper slot of the drawer. It wraps the base and the backdrop slots.
• backdrop: The backdrop slot, it is displayed behind the drawer.
• drawer-header: The header of the drawer, it is displayed at the top of the drawer.
• drawer-body: The body of the drawer, it is displayed in the middle of the drawer.
• drawer-footer: The footer of the drawer, it is displayed at the bottom of the drawer.
• close-button: The close button of the drawer.

You can customize the Drawer component by passing custom Tailwind CSS classes to the component slots.

Drawer has the following attributes on the base element:

• data-should-block-scroll: Whether the drawer should block the scroll of the page on open.
• data-dismissable: When the drawer is dismissable.
• data-keyboard-dismiss-disabled: Whether pressing the Esc key to close the drawer should be disabled.

Drawer has the following attributes on the elements that will close the drawer:

• data-close-drawer: Closes the drawer on click.

Drawer has the following attributes on the drawer-wrapper element:

• data-open: When the drawer is open.