Drawer

Side panel that slides in from the start or end edge. The size prop (xs, sm, md, lg, xl) sets the panel width.

Jump to API reference

Import

Vue
import { UiDrawer } from '@ziyarago/ui/vue'

End

Vue
<UiDrawer
  title="Filters"
  side="end"
  :open="open"
  @close="open = false"
>
  Price, star rating and distance to Haram filters.
</UiDrawer>

Start

Vue
<UiDrawer title="Menu" side="start" :open="open" @close="open = false">
  Navigation links and account settings.
</UiDrawer>

Sizes

Vue
<UiDrawer
  size="lg"
  title="Filters"
  side="end"
  :open="open"
  @close="open = false"
>
  Pick xs (280px) up to xl (640px) wide; the demo shows lg.
</UiDrawer>

API reference

Side panel that slides over the page; use for filters, details and secondary forms.

Props

PropType and valuesDefaultDescription
openbooleanfalseShows the drawer when true; renders nothing when false.
titlestring—Header text and aria-label.
sidestartend'end'Edge the drawer attaches to; start and end follow text direction.
sizexssmmdlgxl'md'Scale of width (280 to 640 px).

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultDrawer body.
footerFooter area, usually action buttons. Rendered only when provided.

Events

Vue: @name. React: onName.

closeCalled on the close button, a click on the scrim or the Escape key.

Notes

  • Has role="dialog" and aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.