SusExpansionPanel

Сворачиваемая секция — заголовок переключает body.

Пакет

SusKit · Атомы (коммерческий)

Открыть в песочнице

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

События

Имя	Поле	Payload
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 заменяет строку title + caret по умолчанию.
• Объедините несколько панелей внутри SusExpansionPanels (молекула) для поведения аккордеона.