Sheet

Overview

Sheet renders NaviusDialog (focus trap, scroll lock, portal) styled as a panel that slides in from a side, with a built-in close affordance. Open is forwarded to the primitive only when the consumer supplies it, so the uncontrolled DefaultOpen/ trigger-driven open path stays live.

Install

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

Usage

@using Zits.Ui.Components

<ZitsSheet>
    <ZitsSheetTrigger>Open</ZitsSheetTrigger>
    <ZitsSheetContent Side="right">
        <ZitsSheetHeader>
            <ZitsSheetTitle>Edit profile</ZitsSheetTitle>
            <ZitsSheetDescription>Make changes to your profile here.</ZitsSheetDescription>
        </ZitsSheetHeader>
        <ZitsSheetFooter>
            <ZitsButton>Save changes</ZitsButton>
        </ZitsSheetFooter>
    </ZitsSheetContent>
</ZitsSheet>

Parts and props

DefaultOpen, Modal, and every NaviusDialogTrigger/NaviusDialogPopup attribute pass through unchanged. The styled parts add:

Prop	Type	Default	Description
Open / OpenChanged	bool	false	Controlled open state on ZitsSheet. Forwarded to NaviusDialog only when supplied.
ZitsSheetContent.Side	string	"right"	"top", "bottom", "left", or "right". Selects which edge the panel slides in from.

ZitsSheetHeader, ZitsSheetFooter, ZitsSheetTitle, and ZitsSheetDescription take only ChildContent/Attributes (layout and text styling over NaviusDialogTitle/ NaviusDialogDescription for the latter two).

Styling surface

Every part accepts class/Attributes, merged with its own base class through Cn.Merge. ZitsSheetContent’s side-dependent classes (position, border, slide direction) are computed from Side.

Parameter	Values
ZitsSheetContent.Side	top · bottom · left · right

Data attribute hooks

Part	Attribute	Description
Backdrop, Content	data-open / data-closed	Emitted by the composed NaviusDialog primitive; drive the fade/slide enter-exit animation.

Underlying primitives

• NaviusDialog