SusStepper

Заголовок multi-step прогресса — titles, icons, active index.

Пакет

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

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

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
Model	Prop<int>	0	v-model
Direction	Prop<string>	"horizontal"	v-model
Variant	Prop<string>	"default"	v-model
NonLinear	Prop<bool>	false	v-model
ShowStepNumber	Prop<bool>	true	v-model

Слоты

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

События

Имя	Поле	Payload
StepChanged	OnStepChanged	int

Хуки стиля

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

• keyboard-focus
• sus-stepper
• sus-stepper__content
• sus-stepper__divider
• sus-stepper__divider--active
• sus-stepper__headers
• sus-stepper__icon
• sus-stepper__indicator
• sus-stepper__info
• sus-stepper__number
• sus-stepper__step
• sus-stepper__step--active
• sus-stepper__step--complete
• sus-stepper__step--error
• sus-stepper__subtitle
• sus-stepper__title
• sus-stepper--alt-labels
• sus-stepper--non-linear
• sus-stepper--vertical
• unity-label
• unity-text-element

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

Items задаются в коде (List<StepItem>).

var stepper = new SusStepper();
stepper.Items.Value = new List<SusStepper.StepItem>
{
    new() { Title = "Account", Subtitle = "Credentials", Icon = "user" },
    new() { Title = "Squad", Subtitle = "Roster", Icon = "users" },
    new() { Title = "Ready", Subtitle = "Confirm", Icon = "check" },
};
stepper.Model.Value = 0;
stepper.Direction.Value = "horizontal";
stepper.ShowStepNumber.Value = true;
stepper.OnStepChanged += index => { /* … */ };

Prop	Роль
Items	List<StepItem> — Title, Subtitle, Icon, Complete, Error
Model	Индекс активного шага (с 0)
Direction	horizontal | vertical
NonLinear	Разрешает переход на любой шаг
ShowStepNumber	Бейдж с номером в заголовке

Заметки

• Слот по умолчанию содержит тело активного шага.
• Отмечайте пройденные шаги через Complete / Error на каждом StepItem.