components/accordion
ナビゲーション · 36 / 64

Accordion

ui.widgets.Accordion

セクションの折りたたみと展開。

BEHAVIOR CONTRACT

排他 / 複数展開、expanded 状態、キーボード操作、body のライフサイクルが一貫しています。

RECORDED INTERACTION

harness が Section Two を展開します。

examples/storybook/stories.zig:2323
// ── Accordion ──
pub fn buildAccordion(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const acc = try W.Accordion(.{ .exclusive = false, .gap = 8 }).mount(scope, cx);
    inline for (.{ "Section One", "Section Two", "Section Three" }, 0..) |title, i| {
        const item = try W.AccordionItem(.{ .title = title, .expanded = (i == 0) }).mount(scope, cx);
        try item.body.appendChild(a, try ui.text(cx, "Panel body content.", .{ .font_size = 13, .color = light.color.fg_secondary }));
        try acc.container.appendChild(a, item.item);
    }
    return acc.container;
}
GitHub でソースを見るexamples/storybook/stories.zig:2323

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