Accordion
ui.widgets.AccordionReplier et déplier des sections.
BEHAVIOR CONTRACT
Exclusif ou multi-ouverture, l'état expanded, l'activation au clavier et la durée de vie du corps sont cohérents.
RECORDED INTERACTION
Le harness déplie 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;
}Le code source tel quel de la story dans le Storybook (zenit 5f9add5+wip 2026-09-30). W désigne ui.widgets ; col / row / label sont de petits helpers de mise en page du Storybook.
AccordionProps
ui.widgets.Accordionfn Accordion(props: AccordionProps) AccordionBuilderChamp
Type
Défaut
Description
exclusiveboolfalseexclusive 模式: 一次只展开一个
gapf328间距
AccordionItemProps
ui.widgets.AccordionItemfn AccordionItem(props: AccordionItemProps) AccordionItemBuilderChamp
Type
Défaut
Description
title[]const u8""标题文本
expandedboolfalse初始展开状态
variantAccordionVariant.default.outline.ghost.default视觉变体
on_change?core.HandlerRefnull展开/折叠回调
context?*anyopaquenull回调上下文
chevron_asset?svg_assets.AssetnullChevron 图标(可选,默认用文本 ">")
AccordionResult
ui.widgets.AccordionChamp
Type
Défaut
Description
container*Node—
—
state*AccordionState—
—
AccordionItemResult
ui.widgets.AccordionItemChamp
Type
Défaut
Description
item*Node—
—
body*Node—
—