SusChip

Компактный тег / фильтр — label, иконки, closable и selected.

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Label	Prop<string>	""	v-model
PrependIcon	Prop<string>	""	v-model
AppendIcon	Prop<string>	""	v-model
Closable	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Variant	Prop<string>	"tonal"	v-model
Color	Prop<string>	"primary"	v-model
Size	Prop<string>	"default"	v-model
Selected	Prop<bool>	false	v-model
Count	Prop<string>	""	v-model

Слоты

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

События

Имя	Поле	Payload
Close	OnClose	—

Хуки стиля

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

• keyboard-focus
• sus-chip
• sus-chip__append-icon
• sus-chip__close
• sus-chip__count
• sus-chip__prepend-icon
• sus-chip__text
• sus-chip--closable
• sus-chip--danger
• sus-chip--disabled
• sus-chip--elevated
• sus-chip--filled
• sus-chip--flat
• sus-chip--has-count
• sus-chip--info
• sus-chip--outlined
• sus-chip--primary
• sus-chip--secondary
• sus-chip--selected
• sus-chip--size-large
• sus-chip--size-small
• sus-chip--size-x-small
• sus-chip--success
• sus-chip--text
• sus-chip--tonal
• sus-chip--warning
• sus-hidden
• sus-slot
• unity-label
• unity-text-element

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

<template>
  <sus:SusChip Label="Legendary"
               Variant="tonal"
               Color="warning"
               PrependIcon="star"
               Closable="true"
               @close="OnRemove" />
</template>

<script>
void OnRemove() { /* … */ }
</script>

var chip = new SusChip();
chip.Label.Value = "Filter";
chip.Variant.Value = "tonal";
chip.Color.Value = "primary";
chip.Selected.Value = true;
chip.OnClose += () => { /* … */ };

Счётчик

Count (строка, по умолчанию пустая) показывает счётчик после подписи — как числа в строке фильтров «All 75 · Worlds 4»:

var chip = new SusChip();
chip.Label.Value = "Worlds";
chip.Count.Value = "4";

Пустой Count не создаёт узла, так что у чипа без счётчика прежняя иерархия. Непустое значение добавляет одну метку sus-chip__count сразу после sus-chip__text и ставит sus-chip--has-count на root. Вид счётчика живёт только в USS — оформляйте его через эти два класса.

Вариант

filled · elevated · tonal · outlined · flat · text