Components / Sheet

Sheet

Extends the Dialog to slide in from an edge of the screen. Same brain (focus trap, scroll lock, Esc / backdrop dismissal, and portalling to the document body), anchored to a Side (top, bottom, left, or right) instead of centred.

Examples

razor

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

Anatomy

Compose the parts: a trigger, the portalled content (set Side), and header / footer slots.

razor

ZitsSheet
├── ZitsSheetTrigger
└── ZitsSheetContent      (portalled, focus-trapped, Side=top|bottom|left|right)
    ├── ZitsSheetHeader
    │   ├── ZitsSheetTitle
    │   └── ZitsSheetDescription
    └── ZitsSheetFooter

Installation

Terminal bash

navius add sheet

API reference

ZitsSheet (root):

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Modal	bool	true

ZitsSheetContent:

Prop	Type	Default
Side	string	"right"