- 分組
- 说明 · 一个功能讲透
- 元件
BentoSpotlight·#bento-spotlight
適合
- 介绍一个功能、一个文件、一条命令
- 有两个关键数字和 3–4 行键值
不適合
- 多个并列功能：用 IconGrid
- 数字是主角：用 StatRow
內容上限
| 1 | hero.title ≤ 10 字，hero.text ≤ 60 字 |
| 2 | cells 正好 2 个：value ≤ 8 字符，note ≤ 18 字 |
| 3 | rows.items 3–4 行：k ≤ 16 字符，v ≤ 22 字 |
| 4 | title ≤ 1 行 × 14 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小节名，2–8 字 |
title · 必填 | string | string[] | 标题；数组手动断行 |
lead | string | 一两句导语，≤ 60 字 |
source | string | 事实出处 |
hero · 必填 | { icon, label, title, text } | 左边高格 |
cells · 必填 | [cell, cell] | 两个数字格，第一个用强调色 |
rows · 必填 | { label, items: { k, v }[] } | 键值行 |
範例程式碼
<BentoSpotlight kicker="构建" title="断网也能放映" hero={{ icon: 'file-check', label: 'dist/index.html', title: '一个离线文件', text: '…' }} cells={[…]} rows={{ label: 'NPM SCRIPTS', items: [{ k: 'npm run check', v: '…' }] }} />