Accordion
ui.widgets.AccordionAbschnitte ein- und ausklappen.
BEHAVIOR CONTRACT
Exklusiv oder mehrfach geöffnet, expanded-Zustand, Tastaturaktivierung und Body-Lebensdauer sind konsistent.
RECORDED INTERACTION
Der Harness klappt Section Two auf.
// ── 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;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
AccordionProps
ui.widgets.Accordionfn Accordion(props: AccordionProps) AccordionBuilderFeld
Typ
Standard
Beschreibung
exclusiveboolfalseexclusive 模式: 一次只展开一个
gapf328间距
AccordionItemProps
ui.widgets.AccordionItemfn AccordionItem(props: AccordionItemProps) AccordionItemBuilderFeld
Typ
Standard
Beschreibung
title[]const u8""标题文本
expandedboolfalse初始展开状态
variantAccordionVariant.default.outline.ghost.default视觉变体
on_change?core.HandlerRefnull展开/折叠回调
context?*anyopaquenull回调上下文
chevron_asset?svg_assets.AssetnullChevron 图标(可选,默认用文本 ">")
AccordionResult
ui.widgets.AccordionFeld
Typ
Standard
Beschreibung
container*Node—
—
state*AccordionState—
—
AccordionItemResult
ui.widgets.AccordionItemFeld
Typ
Standard
Beschreibung
item*Node—
—
body*Node—
—