60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
# 063 Steps 步骤条
|
|
|
|
## 用途
|
|
|
|
显示多步流程的进度：已完成、当前、等待和出错四种状态；横向或纵向排列；每一步是否可点击由调用方决定。
|
|
|
|
## 最小示例
|
|
|
|
```go
|
|
mujica.Steps(c, ¤t, []mujica.Step{
|
|
{Title: "Account", Clickable: true},
|
|
{Title: "Profile", Description: "Name and seal"},
|
|
{Title: "Confirm"},
|
|
}, mujica.StepsOptions{Label: "Sign-up"})
|
|
```
|
|
|
|
签名：`func Steps(c *ui.Context, current *int, steps []Step, opts StepsOptions) StepsResult`
|
|
|
|
## 参数
|
|
|
|
`current`：进行中的步骤下标；之前的步骤视为已完成。等于 `len(steps)` 表示全部完成；超出范围 panic。`steps` 为空时 panic。
|
|
|
|
`Step`
|
|
|
|
| 字段 | 类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| `Title` | `string` | 必填 | 步骤标题；为空时 panic。 |
|
|
| `Description` | `string` | "" | 标题下的说明文字。 |
|
|
| `Error` | `bool` | false | 标为出错，优先于位置推导的状态。 |
|
|
| `Clickable` | `bool` | false | 允许用户点击跳到该步。 |
|
|
|
|
`StepsOptions`
|
|
|
|
| 字段 | 类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| `Vertical` | `bool` | false | 纵向排列，连接线在标记下方。 |
|
|
| `Label` | `string` | "" | 整组的无障碍名称。 |
|
|
|
|
返回 `StepsResult`，内嵌 `*ui.Element`。
|
|
|
|
## 状态
|
|
|
|
- 已完成：Accent 圆形标记内 OnAccent 勾号；之后的连接线为 AccentText。
|
|
- 当前：AccentText 圆环与序号，标题 600 字重。
|
|
- 等待：ControlBorder 圆环与 TextMuted 序号、标题。
|
|
- 出错：Danger 圆环与叉号，标题 Danger 色。
|
|
- 每步的无障碍名称为“第 n 步，共 m 步：标题，状态”，状态不只靠颜色表达。
|
|
|
|
## 事件
|
|
|
|
- `Changed()`：本帧用户点击了可点击的步骤，`*current` 已更新。
|
|
|
|
## 键盘操作
|
|
|
|
- 可点击的步骤组成一个 Tab 停靠点，方向键在其间移动，Enter 或 Space 跳到该步。不可点击的步骤不获取焦点。
|
|
|
|
## 限制
|
|
|
|
- MyGo 没有 step 或 aria-current 角色；步骤以列表项（可点击时为按钮）呈现，状态写入名称。
|