Accordion
ui.widgets.Accordion섹션을 접고 펼칩니다.
BEHAVIOR CONTRACT
배타 / 다중 열림, expanded 상태, 키보드 활성화, body 수명이 일관됩니다.
RECORDED INTERACTION
harness가 Section Two를 펼칩니다.
// ── 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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
AccordionProps
ui.widgets.Accordionfn Accordion(props: AccordionProps) AccordionBuilder필드
타입
기본값
설명
exclusiveboolfalseexclusive 模式: 一次只展开一个
gapf328间距
AccordionItemProps
ui.widgets.AccordionItemfn AccordionItem(props: AccordionItemProps) AccordionItemBuilder필드
타입
기본값
설명
title[]const u8""标题文本
expandedboolfalse初始展开状态
variantAccordionVariant.default.outline.ghost.default视觉变体
on_change?core.HandlerRefnull展开/折叠回调
context?*anyopaquenull回调上下文
chevron_asset?svg_assets.AssetnullChevron 图标(可选,默认用文本 ">")
AccordionResult
ui.widgets.Accordion필드
타입
기본값
설명
container*Node—
—
state*AccordionState—
—
AccordionItemResult
ui.widgets.AccordionItem필드
타입
기본값
설명
item*Node—
—
body*Node—
—