Accordion
ui.widgets.Accordion折叠和展开分段内容。
BEHAVIOR CONTRACT
exclusive / 多开、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—
—