展开列表 <OpenList />
左边标题、导语和一个胶囊按钮;右边细线分隔的列表,每行可带键帽和加号,其中一行展开显示说明。
Template and style descriptions are currently available in Chinese only.
- Group
- 清单 · 5–7 项功能或问答
- Component
OpenList·#open-list
Good for
- 快捷键、命令、功能清单
- 常见问题里只需要展开回答一题
Avoid when
- 每项都要写说明:用 Faq
- 项目超过 7 个:拆页
Content limits
| 1 | title ≤ 2 行 × 6 字;lead ≤ 40 字;action ≤ 16 字 |
| 2 | rows 5–7 行:key ≤ 8 个字符,q ≤ 16 字,展开行的 a ≤ 44 字 |
| 3 | open 只展开一行 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 导语 |
action | string | 胶囊按钮文字 |
rows · required | { key?, q, a }[] | 列表行 |
open | number | 展开的行,默认 0 |
source | string | 事实出处 |
Example
<OpenList kicker="放映" title={['讲的时候,', '一个键就够']} rows={[{ key: 'S', q: '演讲者视图', a: '…' }, { key: 'L', q: '激光笔', a: '' }, …]} />