← All templates

流程手风琴 <ProcessAccordion />

一排竖向面板,折叠时只显示编号和竖排标题;每按一次 → 下一步展开成宽面板(强调色底)显示说明,上一步折回。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
流程 · 4–6 步逐项展开
Component
ProcessAccordion · #process-accordion
Interaction
build: reveal 时每步展开一项

Good for

  • 4–6 步的工艺、流程,每步一段说明
  • 讲一步时希望其他步骤收起来

Avoid when

  • 要同时看全部说明:用 StepTrack
  • 步骤名超过 6 字(竖排会太长)

Content limits

1steps 4–6 步
2title ≤ 6 字;sub ≤ 16 字;body ≤ 60 字
3open 未逐步时展开的面板,默认最后一个

Fields

FieldType
kicker · requiredstring标题上方的小节名,2–8 字
title · requiredstring | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
steps · required{ title, sub?, body }[]流程步骤
opennumber完成态展开的面板序号

Example

<ProcessAccordion kicker="古法" title="竹纸的五道工序" steps={[{ title: '斩竹漂塘', sub: '取料', body: '…' }, …]} source="…" />