Components / Dialog

Dialog

A modal window overlaid on the page. The brain handles the focus trap, scroll lock, Esc / backdrop dismissal, and portalling to the document body; open it below and Tab around to feel the trap.

Examples

razor

<ZitsDialog>
    <ZitsDialogTrigger>Open dialog</ZitsDialogTrigger>
    <ZitsDialogContent>
        <ZitsDialogHeader>
            <ZitsDialogTitle>Edit profile</ZitsDialogTitle>
            <ZitsDialogDescription>Make changes here.</ZitsDialogDescription>
        </ZitsDialogHeader>
        <ZitsDialogFooter>
            <ZitsButton>Save changes</ZitsButton>
        </ZitsDialogFooter>
    </ZitsDialogContent>
</ZitsDialog>

Anatomy

Compose the parts: a trigger, the portalled content, and header / footer slots.

razor

ZitsDialog
├── ZitsDialogTrigger
└── ZitsDialogContent      (portalled, focus-trapped)
    ├── ZitsDialogHeader
    │   ├── ZitsDialogTitle
    │   └── ZitsDialogDescription
    └── ZitsDialogFooter

Installation

Terminal bash

navius add dialog

API reference

ZitsDialog (root):

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