SusStepper

Multi-step progress header — titles, icons, active index.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
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

Slots

Name
(default)

Events

Name	Field	Payload
StepChanged	OnStepChanged	int

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• 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

Usage

Items are set in code (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	Role
Items	List<StepItem> — Title, Subtitle, Icon, Complete, Error
Model	Active step index (0-based)
Direction	horizontal | vertical
NonLinear	Allow jumping to any step
ShowStepNumber	Number badge in the header

Notes

• Default slot holds the body for the active step.
• Mark past steps with Complete / Error on each StepItem.