Modal
ui.widgets.ModalBlockierende Aufgaben, Bestätigungen und fokussierter Kontext.
BEHAVIOR CONTRACT
Portal an der Fensterwurzel, Barriere, Fokus, Escape, Hit-Testing innen / außen und die Einblendanimation werden gemeinsam garantiert.
RECORDED INTERACTION
Der Harness öffnet den zentrierten Dialog und bewegt den Cursor darin, ohne ihn zu schließen.
pub fn buildModal(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
const vis = try scope.createSignal(bool, false);
const st = try cx.bindState(ModalStory, .{ .visible = vis });
const btn = try W.Button(.{ .label = "Open Modal", .on_click = cx.on(ModalStory, st, ModalStory.open) }).mount(scope, cx);
btn.meta.ownership.meta.test_id = "story.modal.open";
try c.appendChild(a, btn);
const m = try W.Modal(.{ .title = "Example Modal", .width = 400 }).visible(vis).mount(scope, cx);
m.dialog.meta.ownership.meta.test_id = "story.modal.dialog";
try m.body.appendChild(a, try ui.text(cx, "Modal body content.", .{ .font_size = 14, .color = light.color.fg_primary }));
// 带 hover 样式的按钮:damage-rect e2e 用它触发"层内小块变化 → 部分重绘"
const ok_btn = try W.Button(.{ .label = "OK" }).mount(scope, cx);
ok_btn.meta.ownership.meta.test_id = "story.modal.ok";
try m.body.appendChild(a, ok_btn);
// portaled 时 overlay 已挂到 window-root portal(覆盖整窗口);未 portal 时才内联。
if (!m.portaled) try c.appendChild(a, m.overlay);
return c;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
ModalProps
ui.widgets.Modalfn Modal(props: ModalProps) ModalBuilderFeld
Typ
Standard
Beschreibung
title?[]const u8null标题
widthf32480宽度
max_heightf32600最大高度
overlay_color?Colornull遮罩颜色 (null = 使用主题 overlay)
background?Colornull对话框背景
close_on_overlaybooltrue点击遮罩关闭
visible?*Signal(bool)null显示控制 Signal(外部传入)
close_icon_asset?svg_assets.Assetnull关闭按钮 SVG 资产(可选,null 则回退文本 ✕)
ModalResult
ui.widgets.ModalFeld
Typ
Standard
Beschreibung
overlay*Node—
—
dialog*Node—
—
body*Node—
—
portaledbool—
—