证明分栏 <ProofSplit />
左边是深色面板:一个大图标方块和几行“设置项”;右边是标题、导语、两个大数字和勾选项。
Template and style descriptions are currently available in Chinese only.
- Group
- 论证 · 一个能力加两个证据数字
- Component
ProofSplit·#proof-split
Good for
- 说明一个自动化能力是怎么设定的,以及效果
- 一句主张配两个硬数字
Avoid when
- 数字多于 2 个:用 KpiBoard
- 没有可以列成设置项的规则
Content limits
| 1 | rows 3–5 行:label ≤ 8,value ≤ 12 个字符 |
| 2 | stats 正好 2 个:value ≤ 6 个字符,label ≤ 12 字 |
| 3 | checks 0–3 条,每条 ≤ 20 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
icon · required | IconName | 面板上的大图标 |
rows · required | { label, value }[] | 设置项 |
stats · required | { value, label }[2] | 两个数字 |
checks | string[] | 勾选项 |
Example
<ProofSplit
kicker="检查"
title="每次构建,都自己检查一遍"
icon="shield"
rows={[{ label: 'FONT', value: '≥ 16.5u' }, { label: 'VIEWPORTS', value: '4 种' }, { label: 'REMOTE', value: '禁止' }]}
stats={[{ value: '16.5u', label: '最小字号' }, { value: '4', label: '检查的视口' }]}
source="scripts/qa.mjs"
/>