Dialog
A window over the page as the page dims, a sheet along its edge, and what goes under every overlay.
Desktop
arkui::dialog · arkui::sheet · arkui::layer
A dialog fades in and grows from 95% on a spring as the page dims a little ahead of it, and goes back the same way, from wherever it got to; a click on the dimmed page, its ×, or <Esc> closes it.
A sheet slides in from beyond the window's edge on a spring and back out the way it came; closed as it slides in, it turns back from where it is.
arkui::dialog
A titled window fading in and growing from 95% over a page as the page dims, as shadcn/ui's does without the blur.
shown(now) -> Shownopen(&shown, now), dimmed(&shown, now) -> 0..=1view(title, close, body, width, height, open)backdrop(close, swallow, dim)SPRING (damping 1.0, response 0.3 s), DIM_LEAD (0.75), FROM (0.95)
Rules
- Closed, it fades and shrinks back the way it came: the app keeps its Shown, hidden, and draws it until Shown::gone.
- Keep a clock running while Shown::moving.
arkui::sheet
A panel the window's height sliding in from its right-hand edge over the page dimmed, as shadcn/ui's sheet does without the blur.
shown(now) -> Shownopen(&shown, now) -> 0..=1view(title, description, close, body, width, open)width(window) -> three quarters, at most MAX_WIDTHbody_height(window, described)SPRING (damping 1.0, response 0.4 s)
Rules
- The page under it dims with it, as under a dialog (dialog::backdrop with dialog::dimmed(&shown, now)).
arkui::layer
What goes under and around an overlay: a backdrop that closes on a click and swallows the wheel, a dimmed one, and pinned or centred placement.
backdrop(close, swallow)dimmed(close, swallow)pinned(content, at)centred(content)
Rules
- A submenu gets no backdrop of its own: a second one over the menu would eat its clicks.
Mobile
Nothing shared for this on Android yet.
Nothing shared for this on iOS yet.