SusListGroup

Выбираемый список строк — title / subtitle уплотняются через Items + display keys.

Пакет

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

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

SusKit · Molecules

Свойства

Имя	Тип	По умолчанию
Selected	Prop<object>	null	v-model
ItemTitle	Prop<string>	""	v-model
ItemValue	Prop<string>	""	v-model
ItemSubtitle	Prop<string>	""	v-model
Density	Prop<string>	"default"	v-model
Lines	Prop<string>	"one"	v-model
Nav	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
RowChrome	Prop<bool>	false	v-model

Слоты

Имя
(по умолчанию)

События

Имя	Поле	Payload
Selected	OnSelected	object

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• keyboard-focus
• sus-list-group
• sus-list-group__item
• sus-list-group__item--disabled
• sus-list-group__item--selected
• sus-list-group__item-append
• sus-list-group__item-append-text
• sus-list-group__item-icon
• sus-list-group__item-subtitle
• sus-list-group__item-subtitle--ellipsis
• sus-list-group__item-text
• sus-list-group__item-title
• sus-list-group__lines--multi
• sus-list-group__lines--one
• sus-list-group--comfortable
• sus-list-group--dense
• sus-list-group--disabled
• sus-list-group--nav
• sus-list-group--row-chrome

Использование

Items — это List<object> (словари или POCO). Используйте ItemTitle / ItemSubtitle / ItemValue для имён свойств.

var list = new SusListGroup();
list.ItemTitle.Value = "Title";
list.ItemSubtitle.Value = "Subtitle";
list.Lines.Value = "two";
list.Items.Value = new List<object>
{
    new Dictionary<string, object> { ["Title"] = "Squad Alpha", ["Subtitle"] = "12 units" },
    new Dictionary<string, object> { ["Title"] = "Squad Beta", ["Subtitle"] = "8 units" },
    new Dictionary<string, object> { ["Title"] = "Squad Gamma", ["Subtitle"] = "15 units" },
};
list.OnSelected += item => { /* … */ };

<template>
  <sus:SusListGroup ItemTitle="Title"
                    ItemSubtitle="Subtitle"
                    Lines="two"
                    :Selected="Selected.Value"
                    :Nav="Nav.Value"
                    :Disabled="Disabled.Value"
                    @selected="OnSelected" />
</template>

<script>
public Prop<object> Selected = new(null);
public Prop<bool> Nav = new(false);
public Prop<bool> Disabled = new(false);
void OnSelected(object item) { Selected.Value = item; }
// Populate Items in code.
</script>

Prop	Role
Items	Строки (List<object>)
ItemTitle / ItemValue / ItemSubtitle	Имена свойств на каждом элементе
Selected	Текущий выбор
Lines	one · two · three
Density	default · compact · comfortable
Nav	Навигационный стиль

Заметки

• Опциональные ключи элемента: Icon / PrependIcon, AppendIcon, AppendText.
• Ручной режим: пропустите Items и разместите кастомных детей в default-слоте.