• Vant React

Steps 步骤条

介绍

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

引入

import { Steps } from "@taroify/core"

代码演示

基础用法

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

<Steps value={0}>
  <Steps.Step>买家下单</Steps.Step>
  <Steps.Step>商家接单</Steps.Step>
  <Steps.Step>买家提货</Steps.Step>
  <Steps.Step>交易完成</Steps.Step>
</Steps>

下方标签

可以通过 alternativeLabel 属性来设置下方标签展示方式

<Steps defaultValue={0} alternativeLabel>
  <Steps.Step>买家下单</Steps.Step>
  <Steps.Step>商家接单</Steps.Step>
  <Steps.Step>买家提货</Steps.Step>
  <Steps.Step>交易完成</Steps.Step>
</Steps>

自定义样式

可以通过 css 设置激活状态下的颜色。

<Steps className="custom-color" defaultValue={0}>
  <Steps.Step icon={<ArrowRight />}>买家下单</Steps.Step>
  <Steps.Step icon={<ArrowRight />}>商家接单</Steps.Step>
  <Steps.Step icon={<ArrowRight />}>买家提货</Steps.Step>
  <Steps.Step icon={<ArrowRight />}>交易完成</Steps.Step>
</Steps>
.custom-color {
  .taroify-step--completed {
    .taroify-step__icon {
      color: #38f;
    }

    .taroify-step__line,
    .taroify-step__circle {
      background-color: #38f;
    }
  }

  .taroify-step--active {
    .taroify-step__label,
    .taroify-step__icon {
      color: #38f;
    }

    .taroify-step__circle {
      background-color: #38f;
    }
  }
}

竖向步骤条

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

<Steps defaultValue={0} direction="vertical">
  <Steps.Step>
    <View>【城市】物流状态2</View>
    <View>2016-07-12 12:40</View>
  </Steps.Step>
  <Steps.Step>
    <View>【城市】物流状态1</View>
    <View>2016-07-11 10:00</View>
  </Steps.Step>
  <Steps.Step>
    <View>【城市】物流状态</View>
    <View>2016-07-10 12:00</View>
  </Steps.Step>
  <Steps.Step>
    <View>快件已发货</View>
    <View>2016-07-10 09:30</View>
  </Steps.Step>
</Steps>

API

Steps Props

参数 说明 类型 默认值
defaultValue 默认步骤对应的索引值 number | string 0
value 当前步骤对应的索引值 number | string 0
direction 步骤条方向，可选值为 vertical string horizontal

主题定制

样式变量

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

名称 默认值 描述
—steps-background-color var(var(—whit) -
—steps-horizontal-padding 10px * $hd 0 -
—steps-vertical-padding 0 0 0 var(—padding-xl) -
—step-color var(—gray-6) -
—step-active-color var(—green) -
—step-process-color var(—text-color) -
—step-font-size var(—font-size-md) -
—step-icon-font-size 12px * $hd -
—step-line-background-color var(—border-color) -
—step-line-transition-duration var(—animation-duration-base) -
—step-completed-color var(—text-color) -
—step-completed-line-background-color var(—green) -
—step-circle-size 5PX -
—step-circle-width var(—step-circle-size) -
—step-circle-height var(—step-circle-size) -
—step-circle-margin 3px * $hd -
—step-circle-background-color var(—gray-6) -
—step-circle-border-radius 50% -
—step-horizontal-title-font-size var(—font-size-sm) -
—step-vertical-line-height var(—line-height-sm) -
—step-vertical-padding 10px * $hd 10px * $hd 10px * $hd 0 -