SusSelect

Form select / combobox — identity закрытого поля (открытый список опционален).

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Model	Prop<object>	null	v-model
Label	Prop<string>	""	v-model
Placeholder	Prop<string>	""	v-model
ItemTitle	Prop<string>	""	v-model
ItemValue	Prop<string>	""	v-model
Multiple	Prop<bool>	false	v-model
Clearable	Prop<bool>	false	v-model
Searchable	Prop<bool>	false	v-model
AllowCreate	Prop<bool>	false	v-model
CreateText	Prop<string>	"Create \"{0}\""	v-model
SearchText	Prop<string>	""	v-model
NoDataText	Prop<string>	"Nothing found"	v-model
Disabled	Prop<bool>	false	v-model
Readonly	Prop<bool>	false	v-model
Loading	Prop<bool>	false	v-model
Mandatory	Prop<bool>	false	v-model
IsOpen	Prop<bool>	false	v-model
Variant	Prop<string>	"outlined"	v-model
Color	Prop<string>	"primary"	v-model
Density	Prop<string>	"default"	v-model
Counter	Prop<bool>	false	v-model
Error	Prop<string>	""	v-model
Hint	Prop<string>	""	v-model
PersistentHint	Prop<bool>	false	v-model
HideDetails	Prop<string>	"auto"	v-model

Слоты

Имя
prepend
selection
append
item
noData

События

Имя	Поле	Payload
Search	OnSearch	string
Create	OnCreate	string
Change	OnChange	object
Open	OnOpen	—
Close	OnClose	—

Хуки стиля

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

• sus-select
• sus-select__arrow
• sus-select__chips
• sus-select__clear
• sus-select__clear--visible
• sus-select__control
• sus-select__counter
• sus-select__details
• sus-select__details--hidden
• sus-select__error
• sus-select__field
• sus-select__field-content
• sus-select__hint
• sus-select__item
• sus-select__item--create
• sus-select__item--highlighted
• sus-select__item--select-all
• sus-select__item--selected
• sus-select__item-check
• sus-select__item-text
• sus-select__label
• sus-select__label--floating
• sus-select__loader
• sus-select__loader--active
• sus-select__messages
• sus-select__placeholder
• sus-select__search--hidden
• sus-select__value
• sus-select__value-row
• sus-select--danger
• sus-select--density-comfortable
• sus-select--density-compact
• sus-select--dirty
• sus-select--disabled
• sus-select--error
• sus-select--filled
• sus-select--focused
• sus-select--has-label
• sus-select--has-value
• sus-select--hide-details
• sus-select--info
• sus-select--loading
• sus-select--multiple
• sus-select--open
• sus-select--outlined
• sus-select--plain
• sus-select--primary
• sus-select--readonly
• sus-select--secondary
• sus-select--solo
• sus-select--solo-filled
• sus-select--solo-inverted
• sus-select--success
• sus-select--underlined
• sus-select--warning
• sus-slot
• unity-label
• unity-text-element

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

<template>
  <sus:SusSelect Label="Faction"
                 Placeholder="Pick one"
                 :Items="Factions.Value"
                 :Model="Faction.Value"
                 Variant="outlined"
                 @change="OnFaction" />
</template>

<script>
public Prop<List<object>> Factions = new(new List<object>
{
    "Empire", "Republic", "Independent",
});
public Prop<object> Faction = new(null);
void OnFaction(object value) { /* … */ }
</script>

var select = new SusSelect();
select.Label.Value = "Country";
select.Placeholder.Value = "Pick one";
select.Items.Value = new List<object> { "US", "UK", "JP" };
select.Model.Value = null;
select.Clearable.Value = true;
select.Searchable.Value = true;
select.OnChange += value => { /* … */ };

Prop	Роль
Items	Опции (List<object>)
Model	Текущий выбор (одиночный)
SelectedValues	Выборы при multi-select
ItemTitle / ItemValue	Имена свойств, когда items — объекты
Multiple / Searchable / AllowCreate	Поведение combobox

Вариант

filled · outlined · underlined · plain · solo · solo-inverted · solo-filled