SusStepper

多步骤进度头部 —— 标题、图标、当前索引。

包

SusKit · 原子（商业）

在 Playground 中打开

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

插槽

名称
（默认）

事件

名称	字段	载荷
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

用法

条目在代码中设置（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	当前步骤索引（从 0 开始）
Direction	horizontal | vertical
NonLinear	允许跳转到任意步骤
ShowStepNumber	在头部显示数字徽标

备注

• 默认插槽容纳当前激活步骤的主体内容。
• 通过每个 StepItem 上的 Complete / Error 标记已完成或出错的步骤。