格子全貌 <BentoBoard />
六个大小不一的白色方块：左上大格放标题和导语，右边两格数字、一格竖排文字，底部一格横排图标，右下一格强调色数字。和可展开的 Bento 不同，它是静态的一页总览。
- 分组
- 总览 · 一页说清全貌
- 组件
BentoBoard·#bento-board
适合
- 产品或项目的一页总览
- 有 3 个数字、一句规则和 4–6 个功能点
不适合
- 要点击展开详情：用 Bento
- 只有一个数字：用 BigStat
内容上限
| 1 | title ≤ 2 行 × 8 字，lead ≤ 40 字 |
| 2 | stats 正好 3 个：label ≤ 14 字符，value ≤ 6 字符，unit ≤ 4 字符，note ≤ 20 字 |
| 3 | note.text ≤ 70 字 |
| 4 | chips.items 4–6 个，label ≤ 6 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名，2–8 字 |
title · 必填 | string | string[] | 标题；数组手动断行 |
lead | string | 一两句导语，≤ 60 字 |
source | string | 事实出处 |
stats · 必填 | [BoardStat × 3] | 三个数字格，最后一个用强调色 |
note · 必填 | { label, text } | 竖排文字格 |
chips · 必填 | { label, items: { icon, label }[] } | 横排图标格 |
示例代码
<BentoBoard kicker="全貌" title={['一个文件，', '装下整份演示']} stats={[{ label: 'TEMPLATES', value: '103', unit: '个', note: '…' }, …]} note={{ label: 'RULE', text: '…' }} chips={{ label: 'KEYS', items: [{ icon: 'monitor', label: '全屏 F' }, …] }} />