单个大数字 <BigStat />
左侧一个超大数字(逐位升起、随鼠标漂移)和它的定义,右侧是标题、导语和 2–3 个辅助数字。
Template and style descriptions are currently available in Chinese only.
- Group
- 证据 · 一个数字撑起一页
- Component
BigStat·#big-stat- Interaction
- 数字逐位从遮罩中升起,并随鼠标轻微漂移。
Good for
- 一个数字本身就是论点:97%、9.34%、1/100
- 需要在一串文字页之间放一个视觉重音
Avoid when
- 几个数字同等重要:用 MetricBars
- 数字需要和别的数比较才有意义:用 DeltaBars 或 Dumbbell
- 一份演示里用超过 3 次
Content limits
| 1 | figure ≤ 6 个字符(含单位),越短字越大 |
| 2 | caption ≤ 30 字,写清这个数字在数什么 |
| 3 | support 2–3 项:value ≤ 8 个字符,label ≤ 24 字 |
| 4 | title 2 行 × ≤ 8 字(右栏 640u 宽) |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名,2–8 字 |
title · required | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
figure · required | string | 大数字 |
caption · required | string | 数字的定义 |
support | { value, label }[] | 辅助数字 |
Example
<BigStat
kicker="查询扇出"
title={['排在前面,', '不等于被引用']}
figure="97%"
caption="AskBot 检索到的页面里,不在 Seekr 前 50 名的比例"
support={[{ value: '99%', label: '不在 Findo 前 30 名' }, { value: '93%', label: 'Zeno 引用的页面不在 Seekr 前 50 名' }]}
source="示例知识库 · 查询扇出"
/>