core component

Drawer

Reusable drawer component.

@wrnexus/ui 0.2.644 props1 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Drawer title="Panel" open="false" side="right" />

Legacy mount name: data-component="Drawer".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`title`	`string`	Optional	`"Panel"`
`open`	`boolean`	Optional	`false`
`side`	`string`	Optional	`"right"`

Slots

default

Events

click

Source contract

Installed source: components/Drawer.wrn

component Drawer {
  props {
    class = ""
    title = "Panel"
    open = false
    side = "right"
  }
  state visible = open
  view {
    <div data-show="visible" class="fixed inset-0 z-50 {class}" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div>
  }
}