SusProgressCircular

Круговой прогресс — determinate value или indeterminate spin.

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Value	Prop<float>	0f	v-model
Max	Prop<float>	100f	v-model
Indeterminate	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Size	Prop<string>	"md"	v-model
Width	Prop<float>	3f	v-model
Rotate	Prop<float>	-90f	v-model
RotationSpeed	Prop<float>	4f	v-model
LabelText	Prop<string>	""	v-model

Слоты

Имя
label

События

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

Хуки стиля

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

• sus-progress-circular
• sus-progress-circular__canvas
• sus-progress-circular__content
• sus-progress-circular__label
• sus-progress-circular--danger
• sus-progress-circular--indeterminate
• sus-progress-circular--lg
• sus-progress-circular--md
• sus-progress-circular--primary
• sus-progress-circular--secondary
• sus-progress-circular--sm
• sus-progress-circular--success
• sus-progress-circular--warning
• sus-progress-circular--white
• sus-progress-circular--xl
• sus-progress-circular--xs

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

<template>
  <sus:SusProgressCircular :Value="LoadPct.Value"
                           Max="100"
                           Color="primary"
                           Size="md"
                           LabelText="42%" />
</template>

<script>
public Prop<float> LoadPct = new(42f);
</script>

var ring = new SusProgressCircular();
ring.Indeterminate.Value = true;
ring.Color.Value = "primary";
ring.Size.Value = "lg";

Размер

xs · sm · md · lg · xl

Заметки

• Слот label заменяет LabelText, когда нужен произвольный контент по центру.
• Width — толщина обводки; Rotate / RotationSpeed настраивают вращение в indeterminate-режиме.