Drawer

Drawers are panels that slide in from the edge of the screen to display additional content or actions.

Preview

Builder

Variant
Position
Sections
Props

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Usage Notes

  • The open prop controls the visibility of the drawer and should be bound with bind:open for two-way data binding.
  • Use the position prop to control from which edge the drawer slides in (start, end, top, or bottom).
  • The onclose callback is triggered when the drawer is closed by clicking the overlay or pressing Escape.
  • Use the header snippet for titles or navigation elements at the top of the drawer.
  • Use the footer snippet for action buttons or additional information at the bottom.
  • The isSolid prop removes transparency from the drawer background for better contrast.
  • The drawer includes an overlay that can be clicked to close the drawer, which also triggers the onclose callback.