# 步骤

## 使用方法

步骤条里的一步。它画出一段进度条、一个指示器，还有带说明的名称。它算完成、进行中还是没开始，全看父级 `Stepper` 的 `activeStep` 和它自己的序号，不用自己设。

`step` 是序号，从 0 开始。默认插槽的内容放在说明下面、可点击的那一行外面，所以里面的表单和按钮还能各自点。`end` 在名称这一行的末尾追加内容，`icon` 换掉内置的指示器图形。

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

const active = ref(1)
</script>

<template>
  <Stepper :active-step="active" @step-click="active = $event">
    <Step label="购物车" :step="0" />
    <Step label="配送" :step="1" />
    <Step label="付款" :step="2" />
  </Stepper>
</template>
```

## 示例

常见的用法和不同的状态。

### 内容插槽

塞进 Step 的内容画在说明下面，缩进对齐的是名称而不是指示器，并且在可点击的那一行外面，所以里面的按钮仍然是它自己的点击目标。真实流程里，一般用这一步是不是进行中来决定要不要显示内容，垂直步骤条就是这样变成可展开的。

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

const street = ref('')
const city = ref('')
</script>

<template>
  <div style="width: 400px; max-width: 100%">
    <Stepper :active-step="0" orientation="vertical">
      <Step
        description="Used for invoices and tax calculation"
        label="Billing address"
        :step="0"
      >
        <div class="step-content-demo">
          <TextInput v-model="street" label="Street" placeholder="1 Hacker Way" />
          <TextInput v-model="city" label="City" placeholder="Menlo Park" />
          <div>
            <Button label="Save address" variant="primary" />
          </div>
        </div>
      </Step>
    </Stepper>
  </div>
</template>

<style scoped>
.step-content-demo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>
```

### 指示器

indicator 能接受的全部写法：默认的 auto、一直显示序号、塞一个自定义节点，还有干脆不显示。每一格都放在自己那个已完成的 Step 上，所以唯一的差别就是这一个属性。所有写法都占同样 16px 的方框，所以完成时把数字换成勾，旁边的文字也不会跟着跳。最后一格说明自定义节点可以是活的：进行中的那一步放一个 Spinner，颜色用 inherit，跟别的图形一样蘸上这一步的色调。

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

<template>
  <div class="step-cells">
    <div class="step-cells__cell">
      <Text type="label">
        auto (default)
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step label="Verify email" :step="0" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        number
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step indicator="number" label="Verify email" :step="0" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Custom node
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step label="Verify email" :step="0">
          <template #icon>
            <Icon icon="check" size="sm" />
          </template>
        </Step>
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        none
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step indicator="none" label="Verify email" :step="0" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Spinner (in progress)
      </Text>
      <Stepper :active-step="0" orientation="vertical">
        <Step label="Verify email" :step="0">
          <template #icon>
            <Spinner size="sm" />
          </template>
        </Step>
      </Stepper>
    </div>
  </div>
</template>

<style scoped>
.step-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.step-cells__cell {
  width: 190px;
}
</style>
```

### 各种状态

单独一步能落到的每一种状态，每格是它自己那条步骤条里的一步。完成、当前、未开始都是拿序号和父级的 activeStep 比出来的，不能直接设；isDisabled 和 status 才是这一步自己声明的两个。状态和进度是两条轴，所以已完成的步骤也可以带一个警告。

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

<template>
  <div class="step-cells">
    <div class="step-cells__cell">
      <Text type="label">
        Completed
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step label="Verify email" :step="0" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Current
      </Text>
      <Stepper :active-step="0" orientation="vertical">
        <Step label="Verify email" :step="0" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Upcoming
      </Text>
      <Stepper :active-step="0" orientation="vertical">
        <Step label="Add a payment method" :step="1" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Disabled
      </Text>
      <Stepper :active-step="0" orientation="vertical">
        <Step is-disabled label="Add a payment method" :step="1" />
      </Stepper>
    </div>
    <div class="step-cells__cell">
      <Text type="label">
        Completed, with a status
      </Text>
      <Stepper :active-step="1" orientation="vertical">
        <Step label="Verify email" :step="0" status="warning" />
      </Stepper>
    </div>
  </div>
</template>

<style scoped>
.step-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.step-cells__cell {
  width: 220px;
}
</style>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `step` | `number` | — | 这一步的序号，从 0 开始。和步骤条的 `activeStep` 一比就得出进度。必填。 |
| `label` | `string` | — | 步骤名称。必填。 |
| `description` | `string` | — | 名称下面的说明。 |
| `status` | `'accent' \| 'success' \| 'warning' \| 'error'` | — | 只给指示器换色。连接线仍按进度着色。 |
| `isDisabled` | `boolean` | `false` | 能不能跳过这一步。文字会变淡，步骤条的前后按钮也会越过它。 |
| `isOptional` | `boolean` | `false` | 在名称后面标出可选。 |
| `indicator` | `'auto' \| 'number' \| 'none'` | `'auto'` | `auto` 完成时显示勾，进行中显示圆环，之后显示序号。`number` 始终显示序号。`none` 什么都不显示。 |
| `density` | `'compact' \| 'balanced' \| 'spacious'` | 跟随步骤条 | 这一步周围的间距。 |

## 插槽

- `default`：说明下面的内容。垂直且进度条分开时，它在可点击的那一行外面。
- `icon`：替换指示器里的图形。放一个 `Spinner` 它就活了。
- `end`：名称这一行末尾的内容，例如预计用时。