Drawer

Edge panel for filters, detail, and settings. It uses the same mask language as Modal: 40% black, mask z-index 3990, panel 4000. While open it locks body scroll and traps focus.

Demos

Right

Default placement is right. width defaults to 400.

Open right

Side panel content scrolls inside the body.

<gk-drawer :open="open" title="Details" placement="right" @update:open="open = $event.detail">...</gk-drawer>

Left

placement="left". On viewports ≤640px, left and right drawers use calc(100% - 48px).

Open left

A narrower navigation pane.

<gk-drawer placement="left" title="Navigation" :open="open"></gk-drawer>

Top

Top keeps a modest height so content below stays hinted. height defaults to 40vh.

Open top

A short banner drawer.

<gk-drawer placement="top" height="32vh" title="Notice" :open="open"></gk-drawer>

Bottom

Bottom uses a large top radius, the same sheet language as the date picker on small screens.

Open bottom

Bottom sheet content.

<gk-drawer placement="bottom" title="Sheet" :open="open"></gk-drawer>

With footer

Slot footer for the same right-aligned actions as Modal.

Filters

Choose what stays visible.

ResetApply

<gk-drawer :open="open" title="Filters">
  <span slot="footer"><gk-button>Apply</gk-button></span>
</gk-drawer>

Form filters

Body content scrolls. Fields use the same 34px control height as Input.

Open filters

<gk-drawer :open="open" title="Filters"><gk-input placeholder="Keyword"></gk-input></gk-drawer>

No mask

show-mask="false" omits the mask and sets aria-modal="false". Escape still closes when closable.

Peek

No dim layer behind this panel.

<gk-drawer show-mask="false" :open="open" title="Peek"></gk-drawer>

Alpine

<div x-data="{ open: false }">
  <gk-button type="button" x-on:click="open = true">Filters</gk-button>
  <gk-drawer title="Filters" x-bind:open="open" x-on:update:open="open = $event.detail">
    <p>Edge panel</p>
  </gk-drawer>
</div>

API

Props

Prop	Type	Default
open	boolean	false
title	string	''
placement	'left' | 'right' | 'top' | 'bottom'	'right'
width	number | string	400
height	number | string	40vh
closable	boolean	true
mask-closable	boolean	true
show-mask	boolean	true

width applies to left/right. height applies to top/bottom. A bare number is pixels.

Slots

Name	Description
default	Body
header	Extra header content
footer	Actions

Events

Name	Detail
update:open	false when dismissed
close	Dismissed

CSS parts

mask, panel, header, title, close, body, footer.

The panel enters over 180ms with a 12px translate from its edge. It shares Modal’s blocking stack, so later dialogs and drawers sit 10 z-index steps higher.