SusExpansionPanel

Collapsible section — title header toggles body content.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Open	Prop<bool>	false	v-model
Title	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model
Disabled	Prop<bool>	false	v-model

Slots

Name
(default)
header

Events

Name	Field	Payload
Toggle	OnToggle	bool

Style hooks

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

• sus-expansion-panel
• sus-expansion-panel__chevron
• sus-expansion-panel__content
• sus-expansion-panel__header
• sus-expansion-panel__header-row
• sus-expansion-panel__title
• sus-expansion-panel--dense
• sus-expansion-panel--disabled
• sus-expansion-panel--open
• sus-slot

Usage

<template>
  <sus:SusExpansionPanel Title="Advanced"
                         :Open="AdvancedOpen.Value"
                         @toggle="OnToggle">
    <!-- body content -->
  </sus:SusExpansionPanel>
</template>

<script>
public Prop<bool> AdvancedOpen = new(false);
void OnToggle(bool open) { AdvancedOpen.Value = open; }
</script>

var panel = new SusExpansionPanel();
panel.Title.Value = "Advanced";
panel.Open.Value = false;
panel.OnToggle += open => { /* … */ };
// Add children into the default slot / content host

Notes

• Slot header replaces the default title + caret row.
• Pair several panels under SusExpansionPanels (molecule) for accordion behavior.