SusChipGroup

Ряд filter-chip — single или multi selection на Items + Model.

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Items	Prop<List<ChipGroupItem>>	[]	v-modelиз пресетов
Model	Prop<string>	""	v-model
Selection	Prop<List<string>>	[]	v-model
Multiple	Prop<bool>	false	v-model
Mandatory	Prop<bool>	false	v-model
Column	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Variant	Prop<string>	"tonal"	v-model
Size	Prop<string>	"default"	v-model

Слоты

Слотов нет.

События

Имя	Поле	Payload
Change	OnChange	string
SelectionChange	OnSelectionChange	List<string>

Хуки стиля

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

• keyboard-focus
• sus-chip-group
• sus-chip-group__chip
• sus-chip-group__row
• sus-chip-group--column
• sus-chip-group--disabled
• sus-chip-group--multiple
• sus-hidden

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

Элементы задаются в коде (List<ChipGroupItem>). У каждого элемента есть Label, Value, опционально Disabled и опционально Count (счётчик чипа, см. SusChip). Ключ элемента — его Value, а при пустом Value — его Label; тот же ключ использует Model.

var group = new SusChipGroup();
group.Items.Value = new List<SusChipGroup.ChipGroupItem>
{
    new() { Label = "All", Value = "all" },
    new() { Label = "Weapons", Value = "weapons" },
    new() { Label = "Armor", Value = "armor" },
};
group.Model.Value = "all";
group.Mandatory.Value = true;
group.Variant.Value = "tonal";
group.Color.Value = "primary";
group.OnChange += value => { /* … */ };

Prop	Role
Items	List<ChipGroupItem> — чипы для рендера
Model	Выбранное значение (одиночный режим)
Multiple / Selection	Режим множественного выбора + выбранные значения
Mandatory	Держать хотя бы один элемент выбранным
Column	Расположить чипы вертикально

Одиночный выбор

По умолчанию группа выбирает одно значение из Items: задайте Model, и группа сама отметит подходящий чип выбранным и оформит его — Selected или Variant на чипах вы не ставите. При Mandatory = true клик по выбранному чипу не снимает выбор. OnChange срабатывает с новым значением. Multiple = true переключает на несколько значений (Selection и OnSelectionChange). Отключённый элемент остаётся отключённым при смене выбора.

Живые счётчики

SetCounts(IDictionary<string, string>) меняет счётчики чипов, уже стоящих в ряду, на месте — ссылки на чипы, фокус и выбор остаются как были:

group.SetCounts(new Dictionary<string, string> { ["all"] = "74", ["weapons"] = "3" });

• Неизвестные ключи игнорируются; чипы, чьего ключа нет, сохраняют свой счётчик.
• Пустое значение или null убирает счётчик этого чипа.
• Чипы строятся при монтировании группы, поэтому вызывайте SetCounts после него. До монтирования кладите счётчики в Items (ChipGroupItem.Count).

Вариант

filled · elevated · tonal · outlined · flat · text