components/dropdown
내비게이션 · 38 / 64

DropdownMenu

ui.widgets.DropdownMenu

버튼에서 열리는 명령 모음.

BEHAVIOR CONTRACT

item kind, 단축키, 선택 콜백, 오버레이 위치, dismiss 동작을 함께 관리합니다.

RECORDED INTERACTION

harness가 File 메뉴를 열어 New / Open / Save를 보여 줍니다.

examples/storybook/stories.zig:2354
// ── DropdownMenu(同 Menu:trigger+popover)──
pub fn buildDropdownMenu(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 8);
    try c.appendChild(a, try label(cx, "Click the trigger to open the dropdown"));
    const items = [_]W.DropdownItem{
        .{ .id = "new", .label_text = "New File" },
        .{ .id = "open", .label_text = "Open…" },
        .{ .id = "sep", .kind = .separator },
        .{ .id = "save", .label_text = "Save" },
    };
    const dm = try W.DropdownMenu(.{ .items = &items }).mount(scope, cx);
    try dm.trigger.appendChild(a, try W.Button(.{ .label = "File ▾", .variant = .secondary }).mount(scope, cx));
    dm.wrapper.meta.ownership.meta.test_id = "story.dropdown.trigger";
    try c.appendChild(a, dm.wrapper);
    return c;
}
GitHub에서 소스 보기examples/storybook/stories.zig:2354

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