SusExpansionPanel

可折叠区块 — 标题栏切换正文内容。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Open	Prop<bool>	false	v-model
Title	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model
Disabled	Prop<bool>	false	v-model

插槽

名称
（默认）
header

事件

名称	字段	载荷
Toggle	OnToggle	bool

样式钩子

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

• 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

用法

<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

备注

• 插槽 header 会替换默认的标题 + 折叠箭头行。
• 将多个面板放入 SusExpansionPanels（molecule）以实现手风琴效果。