细线功能格 <HairlineGrid />
标题下方 1px 细线分成 2×2 或 3×2 的格子,每格图标、等宽小标签、标题和一句说明;焦点格底部透出暖光。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 并列 · 4 或 6 个功能
- 元件
HairlineGrid·#hairline-grid
適合
- 4 或 6 个并列的功能、字段、能力
- 其中一项最重要
不適合
- 每项一个词就够:用 TileWall
- 要讲先后:用 StepTrack
內容上限
| 1 | items 4 或 6 个:title ≤ 10 字,body 18–40 字,tag ≤ 16 个字符 |
| 2 | title ≤ 1 行 × 14 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小节名,2–8 字 |
title · 必填 | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
items · 必填 | { icon, title, body, tag? }[] | 格子 |
focus | number | 发光的格子,默认 0 |
範例程式碼
<HairlineGrid kicker="六个开关" title="一份演示,六个字段定风格" items={[{ icon: 'tuning', title: '风格', tag: 'DeckDef.style', body: '…' }, …]} />