Drawer v0.17.0+ HelixUI v0.17.0 or later required

The Drawer provides a temporary overlay dialog, anchored to the right side of the screen.

Basic Drawer

(triggers scrolling)
Toggle Drawer

Drawer with Positionable Child Elements

Positionable elements (e.g., <hx-tooltip> and <hx-popover>) need to be direct children of the <hx-drawer> element, and placed in a named slot. Positionable elements require the [slot="fixed] attribute.

(triggers scrolling)
Drawer with Slotted Positionable Element

Toggle Popover #1

Tooltip #1

hx-drawer > hx-tooltip[slot="fixed"]

Popover #1

This popover is a slotted child of hx-drawer.

hx-drawer > hx-popover[slot="fixed"]

See Also