数字卡片行 <StatRow />
一排深色卡片,像手机小组件:右上角三个点,等宽小字标签,大数字,一句说明;第一张数字用强调色。下方可放一排名称胶囊。
Template and style descriptions are currently available in Chinese only.
- Group
- 数据 · 3–4 个并列的规模数字
- Component
StatRow·#stat-row
Good for
- 3–4 个同样重要的规模数字
- 顺带列出用到的工具或合作方(只写名字)
Avoid when
- 一个数字就是论点:用 BigStat
- 要看趋势:用 SparkCards
Content limits
| 1 | stats 3–4 个:value ≤ 6 字符,label ≤ 12 字符,note ≤ 28 字 |
| 2 | names ≤ 8 个,只写文字,不放 logo |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
stats · required | { value, label, note }[] | 数字卡片 |
names | string[] | 名称胶囊 |
Example
<StatRow
kicker="规模"
title="四个数说清这套模板"
stats={[{ label: 'templates', value: '86', note: '…' }, …]}
names={['React 19', 'Vite 8', 'motion']}
source="src/kit/catalog.ts"
/>