- 分組
- 机制 · 首尾相接的阶段
- 元件
Cycle·#cycle- 互動
- 阶段依次弹出，强调色小点沿环持续转动；悬停阶段时图标格轻转。
適合
- 阶段会循环往复：开发周期、增长飞轮、复盘闭环
- 想强调“最后一步会喂回第一步”
不適合
- 阶段只走一遍、不回到起点：用 FlowDiagram 或 StepTrack
- 阶段超过 6 个：合并相近阶段
內容上限
| 1 | nodes 3–6 个，从顶部开始顺时针 |
| 2 | title ≤ 8 个字符（显示在环旁）；body ≤ 36 字；tag ≤ 14 个字符 |
| 3 | hub.value ≤ 6 个字符；hub.caption ≤ 12 字 |
| 4 | focus 最多 1 个 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
nodes · 必填 | { icon, title, body, tag? }[] | 阶段 |
hub · 必填 | { value, caption } | 环中心 |
focus | number | 要强调的阶段 |
範例程式碼
<Cycle
kicker="增长飞轮"
title="AARRR：五个环节，首尾相接"
hub={{ value: 'AARRR', caption: 'Dave McClure，2007' }}
nodes={[
{ icon: 'search', title: '获客', tag: 'Acquisition', body: '客户从哪些渠道第一次接触到产品。' },
{ icon: 'bolt', title: '激活', tag: 'Activation', body: '第一次用就得到价值。' },
{ icon: 'refresh', title: '留存', tag: 'Retention', body: '客户持续回来使用。' },
]}
focus={1}
source="Dave McClure · Startup Metrics for Pirates（2007）"
/>