Native SDK
Components
Documentation content

Accordion

Use accordion to show or hide a section of content. text supplies the header label, selected controls whether the children are visible, and pressing the header dispatches on-toggle. Store the open state in the model. The item adjusts its height when opened or closed.

accordion
Open and closed accordion items rendered by the engine (light theme)
an open item and a closed one

Markup

<column width="380">
  <accordion text="Is it accessible?" selected="{faq_open}" on-toggle="toggle_faq">
    <column>
      <text wrap="true" foreground="text_muted">Yes. Widgets carry semantic roles and one roving focus set.</text>
    </column>
  </accordion>
  <accordion text="Is it styled?" on-toggle="toggle_styling" />
</column>

Store a boolean in the model and toggle it in update:

// model: { readonly faq_open: boolean }
case "toggle_faq":
  return { ...model, faq_open: !model.faq_open };
// model: faq_open: bool = false,
.toggle_faq => model.faq_open = !model.faq_open,

A one-open-at-a-time group is a model decision: store the open item's id and compute each item's selected from an equality, flipping it in update.

Programmatic construction (Zig)

In a Zig view, the canvas.Ui builder constructs the same tree programmatically:

ui.column(.{ .width = 380 }, .{
    ui.el(.accordion, .{
        .text = "Is it accessible?",
        .selected = model.faq_open,
        .on_toggle = .toggle_faq,
    }, .{
        ui.column(.{}, .{
            ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "Yes. Widgets carry semantic roles and one roving focus set."),
        }),
    }),
    ui.el(.accordion, .{ .text = "Is it styled?", .on_toggle = .toggle_styling }, .{}),
})

Attributes

AttributeDescription
textText value for text-bearing elements; a literal or one {binding}.
selectedSelected state; often a {a == b} equality.
on-toggleDispatch a Msg on toggle: tag or tag:{payload}. Hit-target elements only (checkbox, toggle, toggle-button, switch, accordion, ...).
heightDefinite height (plain number): the element is exactly this tall; content neither shrinks nor overflows it.
PreviousComponentsNextAlert