Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

基础用法

active 属性表示当前步骤的索引，从 0 起计。

<z-steps :active="active">
  <z-step>第一步</z-step>
  <z-step>第二步</z-step>
  <z-step>第三步</z-step>
  <z-step>第四步</z-step>
</z-steps>

import { ref } from 'vue';
const active = ref(1);

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<z-steps :active="active" active-icon="check" inactive-icon="right-big" active-color="#07c160">
  <z-step>第一步</z-step>
  <z-step>第二步</z-step>
  <z-step>第三步</z-step>
  <z-step>第四步</z-step>
</z-steps>

竖向步骤条

可以通过设置 direction 属性来改变步骤条的显示方向。

<z-steps :active="0" direction="vertical">
  <z-step>
    <view>状态一</view>
    <view>2016-07-12 12:40</view>
  </z-step>
  <z-step>
    <view>状态二</view>
    <view>2016-07-11 10:00</view>
  </z-step>
  <z-step>
    <view>状态三</view>
    <view>2016-07-10 09:30</view>
  </z-step>
</z-steps>

Steps Props

Step Slots

Steps Events

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。