使用方法

Stepper 列出一个流程里的步骤。activeStep 是从 0 开始的当前步。它前面的步骤已完成，当前步进行中，后面的还没开始。

步骤可以不按顺序点时，传入 @step-click。回调拿到从 0 开始的序号，只有这时步骤才会渲染成按钮。默认的 separated 在水平步骤上方画轨道，圆标和标签排在同一行。indicatorPosition="on-track" 把圆标嵌进连接线，标签居中放在圆标下面。indicator 默认是 auto：完成的步骤是勾，当前步是环，后面的步骤是数字。

horizontalOptions.minimumStepWidth 默认是 112。水平步骤条窄于「112 × 步骤数」时会自动收起，只留当前步，并带 Previous 和 Next。轨道还在。collapsedVariant 默认是 withLabelAndControls，并跳过禁用的步骤。withLabel 不显示这两个按钮，hiddenLabel 只留轨道。

<script setup lang="ts">
import { Step, Stepper } from '@astryx-vue/core/Stepper'
import { ref } from 'vue'

const active = ref(2)
</script>

<template>
  <Stepper
    :active-step="active"
    :horizontal-options="{ minimumStepWidth: 112 }"
    @step-click="active = $event"
  >
    <Step label="Cart" :step="0" />
    <Step label="Shipping" :step="1" />
    <Step label="Payment" :step="2" />
    <Step label="Review" :step="3" />
    <Step label="Confirm" :step="4" />
  </Stepper>
</template>

解剖

部分	说明
步骤条	装着各步的有序列表。整条流程的方向，以及指示放在哪里，都由它决定。
框架	把有序的步骤和窄宽度下可选的紧凑摘要组合在一起的布局框。
紧凑摘要	横向 Stepper 窄到没法给每一步都标字时，直接加在轨道下方的可选一行。horizontalOptions.collapsedVariant 决定这一行是「标签加上一页和下一页」、只有标签，还是不出现、只留一条进度轨。轨道上的布局把指示留在轨上，不会在标签旁边再重复当前指示。无论多窄，每一步的名字都留在无障碍序列里。
步骤	流程里的一步，也是带着这一步状态的元素。里面有指示、标签、说明，以及属于它的轨段。
进度条	每一步一条 4px 的分段条。已完成和当前步是填满的。前进一步时，填充沿着刚走过的那段轨长出来，读起来是在前进，而不是一根条在变色。其余变化一次完成：往回走、一次跳过不止一步、中途挂载，以及 prefers-reduced-motion 下的任何变化。一段跨度由不止一段画出时（轨道上的布局会把它分给两步，中间再插内容插槽时是三步），这些段按轨道顺序、以同一个恒定速度走，所以填充读起来是一条线在长，而不是一段段依次点亮。
连接线	轨道上的布局里，指示之间画出的轨。每条连接线先画一条未填充的线，再在上面画表示已完成进度的强调填充。一条连接线由几段拼成，是布局的实现细节，不是可以单独换主题的部分。用 --step-connector-gap 让轨和指示保持距离。
指示	数字徽章、勾，或任意自定义图标。由 indicator 属性控制。
标签	标识这一步的文字。
说明	标签下面的补充文字。

示例

自定义内容

1. Project name

   Repository URL

垂直步骤各自占页面的一块。内容可以是表单、摘要或横幅，并且只渲染当前步骤。

指示器模式

None

Auto

Number

Custom icon

none 只靠轨道和标签表示进度。auto 用勾、环或数字。number 始终显示序号。也可以换成自定义图标。

轨道上的水平步骤

水平轨道上，指示器嵌进连接线，数字像一串珠子。标签居中放在节点下面。

轨道上的垂直步骤

垂直轨道上，指示器落在连续的连接线上，标签和说明放在节点旁边。

校验状态

校验流程里，成功、错误和强调色只改变指示器。连接线的颜色不受状态影响。

窄水平收起

宽度 320px 时，四步低于 112px 的最小宽度，收成当前步骤，并带上一步和下一步。