Drawer

Overview

Drawer renders NaviusDrawer, the headless primitive that owns the focus trap, scroll lock, portal, and the dependency-free drag-to-dismiss (createSheetSwipe), and composes NaviusDrawerTrigger and a ZitsDrawerContent panel on top. ZitsDrawerContent is the draggable sheet itself: it portals a backdrop plus a NaviusDrawerPopup docked to Direction, with the signature drag-handle bar at the grabbable edge.

Install

navius add drawer --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsDrawer>
    <ZitsDrawerTrigger>Open</ZitsDrawerTrigger>
    <ZitsDrawerContent>
        <ZitsDrawerHeader>
            <ZitsDrawerTitle>Edit profile</ZitsDrawerTitle>
            <ZitsDrawerDescription>Update your details below.</ZitsDrawerDescription>
        </ZitsDrawerHeader>
        <ZitsDrawerFooter>
            <ZitsButton>Save</ZitsButton>
        </ZitsDrawerFooter>
    </ZitsDrawerContent>
</ZitsDrawer>

Parts and props

ChildContent and Attributes pass through unchanged on ZitsDrawerTrigger, ZitsDrawerHeader, ZitsDrawerFooter, ZitsDrawerTitle, and ZitsDrawerDescription.

ZitsDrawer adds:

Prop	Type	Default	Description
Open	bool	false	Controlled open state. Bind with @bind-Open.
DefaultOpen	bool	false	Uncontrolled initial open state.
Modal	bool	true	Whether the drawer traps focus and blocks outside interaction.
Direction	string	"bottom"	Edge the sheet docks to and is dragged toward: bottom, top, left, right.

ZitsDrawerContent takes no props of its own beyond ChildContent and Attributes; its panel and handle placement derive from the cascaded Direction.

Styling surface

Attributes on ZitsDrawerContent is merged with the panel’s direction-specific class set via Cn.Class, with the caller’s classes applied last. ZitsDrawerTitle and ZitsDrawerDescription merge their Attributes with fixed typography classes via Cn.Merge.

Parameter	Values
Direction	bottom · top · left · right

Data attribute hooks

Part	Attribute	Description
Backdrop	data-open / data-closed	Animation-in/out state, emitted by NaviusDrawerBackdrop.
Popup	data-open / data-closed	Animation-in/out state, emitted by NaviusDrawerPopup.
Popup	data-swiping	Present while the user is mid-drag, emitted by NaviusDrawerPopup; pairs with the --drawer-swipe-movement-x/y custom properties.

Underlying primitives

• NaviusDrawer (source; manifest not yet published)