SusExpansionPanels

手风琴容器 —— 根据 Items 构建 SusExpansionPanel 子项（可通过 Opened 支持多开）。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Accordion	Prop<bool>	true	v-model
Model	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Change	OnChange	string

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

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

用法

Items 在代码中设置（List<ExpansionPanelItem>）。每个项携带 Title、Value，以及可选的 Body。

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 => { /* … */ };

<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> —— 要构建的面板
Model	当前展开面板的值（手风琴模式）
Opened	Accordion 为 false 时的多开列表
Accordion	同一时间只允许一个面板展开
Density	透传给子面板

备注

• 若只需单个可折叠区块，直接使用原子组件 SusExpansionPanel。