Drawer

Left (default)

Navigation drawers provide ergonomic access to destinations in a site or app.

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintDrawer } from '@getufy/flint-ui';

html

<flint-drawer></flint-drawer>

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`	Whether the drawer is open.
`defaultOpen`	`default-open`	`boolean`	`false`	Initial open state for uncontrolled usage.
`placement`	`placement`	`Placement`	`'left'`	Side from which the drawer slides in.
`variant`	`variant`	`'temporary' \| 'persistent' \| 'mini'`	`'temporary'`	Drawer behavior mode.
`edge`	`edge`	`boolean`	`false`	Whether the drawer uses edge spacing.
`container`	`container`	`boolean`	`false`	Whether the drawer is contained within its parent.
`label`	`label`	`string`	`'Drawer'`	Accessible label for the drawer panel (used as aria-label on the panel).
`initialFocus`	`initial-focus`	`string`	`''`	CSS selector for the element to focus when the drawer opens.

Event	Detail	Description
`flint-drawer-open`	`{ open: true }`	Dispatched after the drawer open animation completes. detail: `{ open: true }`
`flint-drawer-close`	`{ open: false }`	Dispatched when the drawer requests to be closed (backdrop click or Escape). detail: `{ open: false }`

Name	Description
`(default)`	Drawer content.

Name	Description
`backdrop`	The backdrop overlay element.
`panel`	The drawer panel element.

Drawer ​