← 全部模板

轨道图 <Orbit />

右边是两圈轨道,中心一个深色图标,4–8 个彩色图标分布在内外圈上;左边是标题、导语和要点。

分组
结构 · 一个核心和围绕它的东西
组件
Orbit · #orbit

适合

  • 生态、集成、技术栈、合作方
  • 说明“这些都连到同一个东西上”

不适合

  • 节点之间有先后或依赖:用 FlowDiagram
  • 超过 8 个节点

内容上限

1nodes 4–8 个,label ≤ 6 字
2points 0–3 条,每条 ≤ 22 字
3center.label ≤ 8 个字符

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
center · 必填{ icon, label }中心
nodes · 必填{ icon, label }[]轨道上的节点
pointsstring[]左侧要点

示例代码

<Orbit
  kicker="技术栈"
  title="一个文件,背后这几样"
  center={{ icon: 'presentation', label: 'slidehtml' }}
  nodes={[{ icon: 'code', label: 'React 19' }, { icon: 'bolt', label: 'Vite 8' }]}
  source="package.json"
/>