Accordion
ui.widgets.AccordionPliega y despliega secciones.
BEHAVIOR CONTRACT
Exclusivo o con varias abiertas, el estado expanded, la activación por teclado y la vida del cuerpo son coherentes.
RECORDED INTERACTION
El harness despliega 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;
}El código literal de la story en el Storybook (zenit 5f9add5+wip 2026-09-30). W es ui.widgets; col / row / label son pequeños helpers de layout del Storybook.
AccordionProps
ui.widgets.Accordionfn Accordion(props: AccordionProps) AccordionBuilderCampo
Tipo
Predeterminado
Descripción
exclusiveboolfalseexclusive 模式: 一次只展开一个
gapf328间距
AccordionItemProps
ui.widgets.AccordionItemfn AccordionItem(props: AccordionItemProps) AccordionItemBuilderCampo
Tipo
Predeterminado
Descripción
title[]const u8""标题文本
expandedboolfalse初始展开状态
variantAccordionVariant.default.outline.ghost.default视觉变体
on_change?core.HandlerRefnull展开/折叠回调
context?*anyopaquenull回调上下文
chevron_asset?svg_assets.AssetnullChevron 图标(可选,默认用文本 ">")
AccordionResult
ui.widgets.AccordionCampo
Tipo
Predeterminado
Descripción
container*Node—
—
state*AccordionState—
—
AccordionItemResult
ui.widgets.AccordionItemCampo
Tipo
Predeterminado
Descripción
item*Node—
—
body*Node—
—