Taroify

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*	-