Drawer

In progress

Aria

RTL

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.

Anatomy

<Drawer>
  <Drawer.Panel>...</Drawer.Panel>
  </Drawer.Backdrop>
</Drawer>

Default

Positions

With backdrop

With close

Drawer props

Name	Type	Required	Default	Description
is_open	boolean	No	false	Whether or not the Drawer is opened
on_close	event	No	-	Handler for open/close of the element
panel	slot	Yes	-	Content of Drawer element, see Drawer.Panel
backdrop	slot	No	-	Backdrop of Drawer element, see Drawer.Backdrop

Drawer.Panel

Name	Type	Required	Default	Description
position	top \| bottom \| start \| end	No	end	Drawer position on screen
class	css_class	No	-	Tailwind classes for custom styles

Drawer.Backdrop

Name	Type	Required	Default	Description
class	css_class	No	-	Tailwind classes for custom styles