SusExpansionPanels

Accordion host — builds SusExpansionPanel children from Items (+ optional multi-open via Opened).

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`Accordion`	`Prop<bool>`	`true`	v-model
`Model`	`Prop<string>`	`""`	v-model
`Density`	`Prop<string>`	`"default"`	v-model

Slots

No slots.

Events

Name	Field	Payload
`Change`	`OnChange`	`string`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

sus-expansion-panels
sus-expansion-panels__body
sus-expansion-panels__host
sus-expansion-panels__panel
sus-expansion-panels--accordion

Usage

Items are set in code (List<ExpansionPanelItem>). Each item carries Title, Value, optional Body.

csharp

var panels = new SusExpansionPanels();
panels.Accordion.Value = true;
panels.Items.Value = new List<SusExpansionPanels.ExpansionPanelItem>
{
    new() { Title = "General", Value = "general", Body = "Audio / graphics basics." },
    new() { Title = "Controls", Value = "controls", Body = "Keybinds and sensitivity." },
    new() { Title = "Privacy", Value = "privacy", Body = "Online visibility." },
};
panels.Model.Value = "general";
panels.OnChange += value => { /* … */ };

xml

<template>
  <sus:SusExpansionPanels :Model="OpenPanel.Value"
                          :Accordion="Accordion.Value"
                          Density="default"
                          @change="OnChange" />
</template>

<script>
public Prop<string> OpenPanel = new("general");
public Prop<bool> Accordion = new(true);
void OnChange(string value) { OpenPanel.Value = value; }
// Populate Items in code.
</script>

Prop	Role
`Items`	`List<ExpansionPanelItem>` — panels to build
`Model`	Active panel value (accordion)
`Opened`	Multi-open list when `Accordion` is false
`Accordion`	Only one panel open at a time
`Density`	Passed through to child panels

Notes

For a single collapsible section, use atom SusExpansionPanel directly.

SusExpansionPanels ​