跳到正文
册页

展示

Steps - 步骤条

一串带编号的步骤，画成一条轨——一件接一件，中间有条线穿过去。

用法

什么时候用它

流水线、迁移、配方：有先后、没有分叉。一旦出现分叉或者要指向别处，那就是 Diagram；把分叉画成列表等于把它藏起来。
TSX
import { Steps } from '@misoto22/folio'

说明

一串带编号的步骤，画成一条轨。

这就是一条流水线真实的形状：一件接一件，每件有个名字和一行细节，再有一条线穿过去，让眼睛把它们读成一个过程，而不是五行互不相干的内容。技术文章里，它是仅次于示意图最常被需要的图形——而它不是示意图：这里没有分叉，也没有任何东西指向别处，用方框加箭头画它等于在说反话。

连接线画在每一项上，而不是在编号圆点后面拉一条通高的线，所以它是从一个圆点下方开始、到下一个圆点上方结束，而不是从两个圆点中间穿过去——最后一项也就不会拖着一截多余的尾巴。正是这个细节把"轨"和"加了条边框的列表"区分开。

用 <ol>，因为顺序本身就是内容。aria-current="step" 标出被填充的那一个，这是这里唯一一件读屏用户没法从阅读顺序推出来的事。

结构

Steps anatomy
部件说明
轨必填那个 <ol>，带着 --step-size——一个被三条规则同时读取的数字：编号圆点自己的盒子、连接线从哪里开始、以及它对齐在哪个中心上。
编号圆点必填每一步一个 2rem 的圆，aria-hidden：里面是序号，marker 为 "rule" 时则是一个空的细线节点。当前那一步用 --accent 填充。
连接线除最后一项外每一项都画的一条细线，绝对定位，从那个圆点的底一直到该行的底——所以它跨的是两步之间的空隙，而不是从圆点背后穿过去，序列末尾也不会拖出一截尾巴。
步骤标题必填step.title，15px 界面字脸。它是这一步的名字——一个名词，不是对这一步里发生了什么的描述。
注解step.note，标题下面的一行等宽字：这一步由什么构成、要花多少代价、用到什么。

实践建议

推荐

  • 一串状态要用 marker="rule"。「排队中、运行中、已完成」是一种先后，不是一份操作清单，而每一项前面挂一个数字，等于告诉读者这些是要他去执行的步骤。
  • 最多只标一步 current：这是整条轨里唯一被说出来、而不是被画出来的事，而两个被填充的圆点，会让这个流程同时出现在两个地方。
  • 没有标题为这串步骤命名时要传 label——它是这个列表唯一的名字，没有它，这条轨会被播报成五个不属于任何东西的项。
  • 要调这条轨，就在列表上改 --step-size，别去重写圆点的样式：圆点的盒子、连接线的起点和它的居中，读的都是那一个数字，三者只动其一，那条线就会从半空中开始。

避免

  • 画在这里的分叉，是读者永远看不见的分叉。连接线只从每一步连到数组里的下一步，别的哪儿都不去，所以两条分支会被压平成四个连续的步骤，而在它们之间做选择这件事，彻底离开了这张图。
  • steps={[]} 渲染出来是 null，不是一条空轨，所以一份被筛得什么都不剩的列表，会留下一个标题孤零零地站在一片空白之上——除非调用处自己去查长度。
  • 这里没有任何东西可以点，而属性是展开到 <ol> 上的，所以一个本来给某一步的 onClick 会落在整个列表上。读者要在其中来回走动的序列，是 Breadcrumb 或者 Tabs。

示例

default

一条流水线画成一根轨：一件接着一件，每件用一个名词做名字，底下一行等宽字写细节。顺序就是内容，所以这是一个 ol——而 label 是这份列表在这里唯一的名字，因为它上面没有任何标题说明这串序列是什么。恰好有一个步骤是当前的，而这正是这根轨用陈述而非绘制来表达的那一件事。

  1. CorpusBlog MDX · project database · profile
  2. ChunkingBy heading · 300–800 tokens
  3. EmbeddingVoyage 3.5-lite · 1024 dimensions
  4. Storagepgvector — the site’s own database
  5. RetrievalTop 5 by cosine · 0.2 floor
  6. AnswerReasoning filtered · live citations

states not instructions

同一根轨，去掉数字。marker="rule" 是给一串状态用的——排队中、构建中、已发布，是这个流程经过的一个次序，而在每一个前面摆一个数字，是在告诉读者它们是要去执行的步骤。填充的标记说明它走到哪儿了；出现第二个 current，会把这次发布同时放在两个地方。

  1. QueuedBehind one earlier build
  2. Buildingpnpm build · 1m 20s so far
  3. Publishednpm registry, then the docs site

notes that carry code

note 收的是节点、不只是字符串，所以一个步骤可以直接带上那条确切的命令，而不是对它的一段描述。无论哪种，都压在短短一行以内：这根轨是一串序列，而标记底下的一整段，会把它打回它本来要取代的那种编号列表。这里没有任何东西可点——那些属性是摊到 ol 上的，所以一个本意给某个步骤的 onClick，会落在整份列表上。

  1. Installpnpm add @misoto22/folio
  2. Import the stylesheet@misoto22/folio/styles.css
  3. Render<Button>Save</Button>

无障碍

  • 用 <ol>，因为顺序本身就是内容——一堆 div 说明不了先后。
  • aria-current="step" 标出被填充的那一个，这是这里唯一一件读者没法从阅读顺序推出来的事。
  • 编号圆点和连接线都是 aria-hidden：那个数字就是列表序号，读屏软件本来就会念。

相关组件

DiagramArticle