轨道图 <Orbit />
右边是两圈轨道,中心一个深色图标,4–8 个彩色图标分布在内外圈上;左边是标题、导语和要点。
Template and style descriptions are currently available in Chinese only.
- Group
- 结构 · 一个核心和围绕它的东西
- Component
Orbit·#orbit
Good for
- 生态、集成、技术栈、合作方
- 说明“这些都连到同一个东西上”
Avoid when
- 节点之间有先后或依赖:用 FlowDiagram
- 超过 8 个节点
Content limits
| 1 | nodes 4–8 个,label ≤ 6 字 |
| 2 | points 0–3 条,每条 ≤ 22 字 |
| 3 | center.label ≤ 8 个字符 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名,2–8 字 |
title · required | string | string[] | 标题;数组手动断行 |
lead | string | 一两句导语,≤ 60 字 |
source | string | 事实出处 |
center · required | { icon, label } | 中心 |
nodes · required | { icon, label }[] | 轨道上的节点 |
points | string[] | 左侧要点 |
Example
<Orbit
kicker="技术栈"
title="一个文件,背后这几样"
center={{ icon: 'presentation', label: 'slidehtml' }}
nodes={[{ icon: 'code', label: 'React 19' }, { icon: 'bolt', label: 'Vite 8' }]}
source="package.json"
/>