← 全部模板

同心圆 <Concentric />

左边 3–4 个同心圆环,核心最深;右边列表逐条解释每一圈,圆点颜色和圆环对应。

在示例演示里查看 →

分组
结构 · 从核心到外围
组件
Concentric · #concentric

适合

  • 核心与外围、影响范围、目录分层
  • 每一圈包住里面一圈

不适合

  • 各层是上下堆叠关系:用 ArchLayers
  • 一个核心加若干平级的卫星:用 Orbit

内容上限

1rings 3–4 圈:label ≤ 6 字,note ≤ 30 字

字段

字段类型
kicker · 必填string小节名,2–8 字
title · 必填string | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
rings · 必填{ label, note }[]由内向外

示例代码

<Concentric kicker="项目结构" title="…" rings={[{ label: '模板', note: '…' }, …]} />