К содержимому

SusToggle

SusToggle

Булев switch с label — on/off для настроек и фильтров.

Пакет

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

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

SusKit · Atoms

Свойства

ИмяТипПо умолчанию
ModelProp<bool>falsev-model
LabelProp<string>""v-model
ColorProp<string>"primary"v-model
LabelPositionProp<string>"right"v-model
InsetProp<bool>falsev-model
DisabledProp<bool>falsev-model
LoadingProp<bool>falsev-model
DensityProp<string>"default"v-model
VariantProp<string>"icon"v-model

Слоты

Слотов нет.

События

ИмяПолеPayload
ChangeOnChangebool

Хуки стиля

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

  • keyboard-focus
  • sus-toggle
  • sus-toggle__icon
  • sus-toggle__label
  • sus-toggle__label--left
  • sus-toggle__label--right
  • sus-toggle__track-thumb
  • sus-toggle--active
  • sus-toggle--danger
  • sus-toggle--density-comfortable
  • sus-toggle--density-compact
  • sus-toggle--disabled
  • sus-toggle--inset
  • sus-toggle--label-left
  • sus-toggle--label-right
  • sus-toggle--loading
  • sus-toggle--primary
  • sus-toggle--success
  • sus-toggle--track

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

xml
<template>
  <sus:SusToggle Label="Show HUD"
                 :Model="HudVisible.Value"
                 Color="primary"
                 LabelPosition="right"
                 @change="OnHud" />
</template>

<script>
public Prop<bool> HudVisible = new(true);
void OnHud(bool value) { /* … */ }
</script>
csharp
var toggle = new SusToggle();
toggle.Label.Value = "Mute chat";
toggle.Model.Value = false;
toggle.Color.Value = "success";
toggle.Inset.Value = true;
toggle.OnChange += value => { /* … */ };

Цвета

primary · success · danger (плюс токены темы, если разрешено)

Заметки

  • LabelPosition: left · right.
  • Loading держит контрол в состоянии busy, пока настройка синхронизируется.