小界面步骤卡 <UiSteps />
三张圆角步骤卡，每张上半是一个小界面（输入框、选项胶囊或完成提示），下半是步骤号、标题和说明。
Template and style descriptions are currently available in Chinese only.
- Group
- 操作 · 三步上手
- Component
UiSteps·#ui-steps
Good for
- 上手、设置、新建这类三步流程
- 每一步都能画成一个简单的界面动作
Avoid when
- 步骤带命令且超过 3 步：用 StepTrack
- 步骤没有先后：用 NumberedColumns
Content limits
| 1 | steps 正好 3 步：title ≤ 8 字，text ≤ 36 字 |
| 2 | ui: field（label ≤ 10 字，value ≤ 24 字符）/ options（2–4 个，各 ≤ 8 字符）/ done（≤ 14 字） |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名，2–8 字 |
title · required | string | string[] | 标题；数组手动断行 |
lead | string | 一两句导语，≤ 60 字 |
source | string | 事实出处 |
steps · required | [UiStep × 3] | 步骤与小界面 |
Example
<UiSteps kicker="新建演示" title="三步，从空目录到 PASS" steps={[{ title: '建目录', text: '…', ui: { kind: 'field', label: '演示文件', value: 'src/decks/demo/index.tsx' } }, …]} />