SusExpansionPanels

Хост-аккордеон — строит дочерние SusExpansionPanel из Items (+ опциональный multi-open через Opened).

Пакет

SusKit · Молекулы (коммерческий)

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

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Accordion	Prop<bool>	true	v-model
Model	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model

Слоты

Слотов нет.

События

Имя	Поле	Payload
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	Значение активной панели (accordion)
Opened	Список multi-open, когда Accordion = false
Accordion	В один момент открыта только одна панель
Density	Прокидывается в дочерние панели

Заметки

• Для одной сворачиваемой секции используйте атом SusExpansionPanel напрямую.