ZacharyZhang-NY
8880865021
Every component result type now names its element Element instead of embedding *ui.Element. The eleven element-plus-changed results (AccordionView, CarouselView, CollapsibleView, ImageViewerView, PaginationResult, StepsResult, SidebarResult, TabsResult, RatingParts, FileDropZoneParts, TransferParts) fold into ChoiceResult. Fixes four Gallery demos where .Width(...).Changed() read the element's flag instead of the component's: Accordion, MultiSelect, Cascader, TreeSelect. TestDataAccordionDemoLogsChange covers the Accordion.
2.0 KiB
2.0 KiB
063 Steps 步骤条
用途
显示多步流程的进度：已完成、当前、等待和出错四种状态；横向或纵向排列；每一步是否可点击由调用方决定。
最小示例
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) ChoiceResult
参数
current：进行中的步骤下标；之前的步骤视为已完成。等于 len(steps) 表示全部完成；超出范围 panic。steps 为空时 panic。
Step
| 字段 | 类型 | 默认值 | 含义 |
|---|---|---|---|
Title |
string |
必填 | 步骤标题；为空时 panic。 |
Description |
string |
"" | 标题下的说明文字。 |
Error |
bool |
false | 标为出错，优先于位置推导的状态。 |
Clickable |
bool |
false | 允许用户点击跳到该步。 |
StepsOptions
| 字段 | 类型 | 默认值 | 含义 |
|---|---|---|---|
Vertical |
bool |
false | 纵向排列，连接线在标记下方。 |
Label |
string |
"" | 整组的无障碍名称。 |
返回 ChoiceResult，Element 字段是组件元素。
状态
- 已完成：Accent 圆形标记内 OnAccent 勾号；之后的连接线为 AccentText。
- 当前：AccentText 圆环与序号，标题 600 字重。
- 等待：ControlBorder 圆环与 TextMuted 序号、标题。
- 出错：Danger 圆环与叉号，标题 Danger 色。
- 每步的无障碍名称为“第 n 步，共 m 步：标题，状态”，状态不只靠颜色表达。
事件
Changed()：本帧用户点击了可点击的步骤，*current已更新。
键盘操作
- 可点击的步骤组成一个 Tab 停靠点，方向键在其间移动，Enter 或 Space 跳到该步。不可点击的步骤不获取焦点。
限制
- MyGo 没有 step 或 aria-current 角色；步骤以列表项（可点击时为按钮）呈现，状态写入名称。