阶梯层级 <StackBars />
3–6 条横条从上到下逐层向右错开，颜色从主题色逐渐变深，每条左边名称、右边一句说明。为号外风格设计，其他风格也能用。配 build: 'reveal' 逐层出现。
- 分组
- 结构 · 一层层错开的横条
- 组件
StackBars·#stack-bars- 交互
- 按 → 逐层出现
适合
- 分层结构：技术栈、组织层级、优先级
- 上层依赖下层的关系
不适合
- 层与层之间有数量关系：用 Funnel 或 Pyramid
- 每层要详细说明：用 LayerStack
内容上限
| 1 | layers 3–6 层，从上到下 |
| 2 | name ≤ 8 字 |
| 3 | note ≤ 20 字 |
| 4 | 页标题 ≤ 22 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
layers · 必填 | { name, note }[] | 层，从上到下 |
source | string | 出处 |
示例代码
<StackBars
kicker="分层"
title="一份演示由五层叠成"
layers={[{ name: '内容', note: 'src/decks 里的 deck 文件' }, …]}
/>