浮层与反馈Overlays · 43 / 64

Sheet

ui.widgets.Sheet

从窗口边缘进入的辅助任务面板。A side panel that slides in from the window edge.

BEHAVIOR CONTRACT

left / right side、barrier、panel hit-test、动画和关闭策略保持一致。left / right side, barrier, panel hit-testing, animation and close policy are consistent.

RECORDED INTERACTION

Harness 打开右侧 Sheet，记录完整滑入过程。The harness opens the right sheet and records the full slide-in.

examples/storybook/stories.zig:2532

pub fn buildSheet(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(SheetStory, .{ .visible = vis });
    const sbtn = try W.Button(.{ .label = "Open Sheet", .on_click = cx.on(SheetStory, st, SheetStory.open) }).mount(scope, cx);
    sbtn.meta.ownership.meta.test_id = "story.sheet.open";
    try c.appendChild(a, sbtn);

    const sh = try W.Sheet(.{ .side = .right, .width = 320 }).visible(vis).mount(scope, cx);
    sh.panel.meta.ownership.meta.test_id = "story.sheet.panel";
    try sh.content.appendChild(a, try ui.text(cx, "Sheet panel content.", .{ .font_size = 14, .color = light.color.fg_primary }));
    if (!sh.portaled) try c.appendChild(a, sh.overlay);
    return c;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2532

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

ModalModal

GlassBoxGlassBox