components/modal
オーバーレイとフィードバック · 42 / 64

Modal

ui.widgets.Modal

ブロッキングなタスク、確認、集中すべきコンテキスト。

BEHAVIOR CONTRACT

window-root portal、barrier、フォーカス、Escape、inside / outside のヒットテスト、入場アニメーションをまとめて保証します。

RECORDED INTERACTION

harness が中央のダイアログを開き、内部のボタンに hover しても閉じないことを確認します。

examples/storybook/stories.zig:2504
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;
}
GitHub でソースを見るexamples/storybook/stories.zig:2504

Storybook にあるこの story のコードそのままです(zenit 5f9add5+wip 2026-09-30)。W は ui.widgets のことで、col / row / label は Storybook 内の小さなレイアウトヘルパーです。

zenit · デュアルライセンスオープンソースプロジェクトは GPL-3.0-only のもとで無料で使えます。クローズドソースや商用製品には商用ライセンスが必要です。作者への連絡先:zongyi.xzy#gmail.com(# を @ に置き換え)zenit 5f9add5+wip 2026-09-30