SusSpinner

Indeterminate busy-индикатор — только размер и цвет.

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Size	Prop<string>	"md"
Color	Prop<string>	"primary"
Dual	Prop<bool>	false

Слоты

Слотов нет.

События

Публичных событий нет.

Хуки стиля

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

• sus-hidden
• sus-spinner
• sus-spinner__arc
• sus-spinner__arc--inner
• sus-spinner--danger
• sus-spinner--dual
• sus-spinner--lg
• sus-spinner--md
• sus-spinner--primary
• sus-spinner--secondary
• sus-spinner--sm
• sus-spinner--success
• sus-spinner--warning
• sus-spinner--white
• sus-spinner--xl
• sus-spinner--xs

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

<template>
  <sus:SusSpinner Size="md" Color="primary" />
</template>

var spin = new SusSpinner();
spin.Size.Value = "lg";
spin.Color.Value = "secondary";

Двойная дуга

Dual = true добавляет вторую, внутреннюю дугу, которая вращается в обратную сторону:

var spin = new SusSpinner();
spin.Dual.Value = true;

Обе дуги несут базовый класс sus-spinner__arc, поэтому правило скина на .sus-spinner__arc оформляет обе; различайте их по .sus-spinner__arc--inner. Компонент держит вид внутренней дуги по умолчанию составными правилами на .sus-spinner__arc.sus-spinner__arc--inner: width/height остаются auto (размер задаёт отступ 20%), а под .sus-spinner--dual (плюс класс размера для xs/lg/xl) её верхний край остаётся прозрачным, а толщина рамки следует размеру. Правило скина, которое перебивает эти правила по специфичности и задаёт width, height, border-top-color или border-width на .sus-spinner__arc, меняет и внутреннюю дугу — добавьте парное правило .sus-spinner__arc.sus-spinner__arc--inner, которое вернёт эти значения.

Размер

xs · sm · md · lg · xl

Цвета

primary · secondary · success · danger · warning · info

Заметки

• API, чтобы остановить спиннер, нет — он крутится всегда. Чтобы скрыть его, уберите его из иерархии.
• Спиннер, который убрали из дерева и добавили обратно, снова крутится.

Reduce motion

Пока включён SusMotion.Reduce, вращение ставится на паузу с дугами в начальном угле, а корень получает sus-spinner--reduced, чтобы скин мог оформить неподвижный спиннер. Выключение флага возобновляет вращение.