Stepper

引导用户完成分步流程。

实时预览

正在加载预览…

参数配置

颜色 color尺寸 size纵向 vertical否禁用 disabled否顺序推进 linear

全部字段 11

StepperItems

列表项 · 3

StepItem

ID

Title

Description

Icon

Disabled

StepItem

ID

Title

Description

Icon

Disabled

StepItem

ID

Title

Description

Icon

Disabled

StepperOptions

Label

Vertical

Disabled

Linear

Color

Size

CanSelect

OnChange

UI

Styles · 0

Style

Go 代码

// Inside a view; c is *ui.Context, t is nui.Theme.
// Keep s (example state) outside the view. See the complete example.
nui.Stepper(c.Key("stepper"), t, &s.Step, []nui.StepItem{{ID: "details", Title: "Details", Description: "Project name"}, {ID: "team", Title: "Team", Description: "Invite members"}, {ID: "review", Title: "Review", Description: "Confirm changes"}}, nui.StepperOptions{Label: "Setup", Color: nui.ColorDefault, Size: nui.SizeDefault, Vertical: false, Disabled: false, Linear: nui.Optional[bool]{}})

使用说明

依次选择 Details、Team 与 Review，比较 Linear 和纵向排列。Stepper 展示步骤与当前进度；各步骤的表单内容、校验和提交逻辑由应用组合。

API 参考

Stepper

源码

func Stepper(c *ui.Context, t Theme, value *string, items []StepItem, o StepperOptions) ui.Element

StepperOptions

源码

type StepperOptions struct {
	Label              string
	Vertical, Disabled bool
	// Linear defaults to true, as Nuxt's: a step can be reached only after
	// the one before it. Set(false) allows any available step.
	Linear    Optional[bool]
	Color     Color
	Size      Size
	CanSelect func(string) bool
	OnChange  func(string)
	Decoration
}

字段	类型	说明
`Label`	`string` Go 零值: `""`	控件标签或可访问名称。
`Vertical`	`bool` Go 零值: `false`	启用纵向排列。
`Disabled`	`bool` Go 零值: `false`	禁用组件及其交互。
`Linear`	`Optional[bool]` Go 零值: `unset`	按顺序推进步骤；未设置时通常为 true。
`Color`	`Color` Go 零值: `ColorDefault`	语义颜色；默认值继承主题或组件配色。
`Size`	`Size` Go 零值: `SizeDefault`	组件尺寸；默认值继承主题或组件尺寸。
`CanSelect`	`func(string) bool` Go 零值: `nil`	判断某个步骤是否可以进入。
`OnChange`	`func(string)` Go 零值: `nil`	值发生变化时通知应用的回调。
`UI`	`Styles` Go 零值: `zero value`	以部件名称为键覆盖外观和间距。
`Style`	`func(Slot, ui.Element)` Go 零值: `nil`	同步配置当前构建的部件；不要保留 Element。