Dialog

Overview

Dialog composes the headless NaviusDialog primitive family, which owns the focus trap, scroll lock, Escape/backdrop dismissal, and portalling to the document body. The styled layer adds the backdrop overlay class, the popup’s centered card treatment, and a built-in close-affordance button (an inline SVG X) inside ZitsDialogContent.

Install

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

Usage

@using Zits.Ui.Components

<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>

Parts and props

ZitsDialog’s Open, OpenChanged, DefaultOpen, Modal, and ChildContent pass through to NaviusDialog unchanged. ZitsDialogTrigger, ZitsDialogTitle, and ZitsDialogDescription pass their params through unchanged. ZitsDialogContent adds:

Prop	Type	Default	Description
Motion	string?	null	Optional Navius.Motion presence class (e.g. motion-pop) forwarded onto the popup. Inert unless the app links _content/Navius.Motion/navius-motion.css.

ZitsDialogHeader and ZitsDialogFooter render a plain div with layout classes; they have no underlying primitive.

Anatomy

ZitsDialog                    (wraps NaviusDialog, the brain)
├── ZitsDialogTrigger
└── ZitsDialogContent
    ├── ZitsDialogHeader
    │   ├── ZitsDialogTitle
    │   └── ZitsDialogDescription
    └── ZitsDialogFooter

Styling surface

Attributes on every part is merged with that part’s preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter.

Data attribute hooks

None referenced by the styled overlay/popup classes: unlike AlertDialog and Popover, ZitsDialogContent’s preset classes don’t key off data-open/data-closed for enter/exit animation.

Underlying primitives

• NaviusDialog