步骤条 Steps

align-center 对应 Arco 的纵向标签布局，其他形态保留 Element Plus 结构。 属性用法见 Element Plus 文档。

居中步骤

align-center 对应 Arco 的纵向标签，点击 Next 推进步骤。

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" align-center>
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

默认与错误状态

默认靠左与错误状态保留 Element Plus 布局，使用 Arco 状态色。

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" process-status="error">
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

简洁步骤

Arco 没有对应的 simple 结构，保留 Element Plus 的紧凑布局。

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; ">
    <el-steps :active="active" simple>
      <el-step title="Start"  />
      <el-step title="Review"  />
      <el-step title="Finish"  />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

纵向步骤

纵向形态保留 Element Plus 布局并使用主题状态色。

<script setup lang="ts">
import { ref } from 'vue'
const active = ref(1)
</script>

<template>
  <div style="width: 100%; height: 240px">
    <el-steps :active="active" direction="vertical">
      <el-step title="Start" description="Create the project" />
      <el-step title="Review" description="Review the details" />
      <el-step title="Finish" description="Publish the result" />
    </el-steps>
  </div>
  <el-button @click="active = (active + 1) % 4">Next</el-button>
</template>

与 Arco 的差异

• finish 默认显示数字，Arco 显示对勾；连线填充时机和布局宽度算法保留 Element Plus。
• 默认靠左、simple 和 vertical 形态按主题配色，布局保留 Element Plus。