components/sheet
오버레이와 피드백 · 43 / 64

Sheet

ui.widgets.Sheet

창 가장자리에서 밀려 들어오는 보조 패널.

BEHAVIOR CONTRACT

left / right 방향, barrier, 패널 히트 테스트, 애니메이션, 닫기 정책이 일관됩니다.

RECORDED INTERACTION

harness가 오른쪽 Sheet를 열고 슬라이드 인 전체 과정을 녹화합니다.

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에서 소스 보기examples/storybook/stories.zig:2532

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