---
title: WKSteps 步骤条
group:
  title: 展示组件
  path: /show/
---

## 何时使用

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

- 在 组件库 中，我们提供了两种类型的步骤条。

  - 横向步骤条：两种状态 -- 未激活、激活及已完成，已完成状态的步骤处于激活状态的左边，未完成的步骤处于激活状态的右边。
  - 纵向步骤条：两种状态 -- 激活及已完成，由激活状态到已完成状态按倒序展示。

- 另外我们提供了以下两种功能用于自定义步骤条。
  - 自定义颜色：两种状态 -- 激活及未激活，该功能的值需写在 WKSteps 层级。
  - 自定义图标：三种状态 -- 激活、未激活及已完成，已完成的优先级高于未激活。该功能的值在 WKSteps 或 WKStep 层级均可定义，WKStep 层级的优先级高于 WKSteps 层级。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKSteps, WKStep, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View style={{ width: '100%', padding: '0px 4px' }}>
        <WKSteps active={1}>
          <WKStep>步骤1</WKStep>
          <WKStep>步骤2</WKStep>
          <WKStep>步骤3</WKStep>
          <WKStep>步骤4</WKStep>
        </WKSteps>

        <WKSteps direction="vertical" style={{ marginTop: '20px' }}>
          <WKStep>
            <View>步骤4</View>
            <View>2021-12-31 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤3</View>
            <View>2021-12-30 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤2</View>
            <View>2021-12-29 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤1</View>
            <View>2021-12-28 12:30</View>
          </WKStep>
        </WKSteps>
      </View>
    </PageWrapper>
  );
};
```

## WKSteps 自定义颜色

```tsx
/**
 * title: WKSteps 自定义颜色
 * desc: WKSteps 自定义颜色
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKSteps, WKStep, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="WKSteps 自定义颜色">
      <View style={{ width: '100%', padding: '0px 4px' }}>
        <WKSteps active={1} activeColor="red" inactiveColor="blue">
          <WKStep>步骤1</WKStep>
          <WKStep>步骤2</WKStep>
          <WKStep>步骤3</WKStep>
          <WKStep>步骤4</WKStep>
        </WKSteps>

        <WKSteps direction="vertical" activeColor="red" inactiveColor="blue" style={{ marginTop: '40rpx' }}>
          <WKStep>
            <View>步骤1</View>
            <View>2021-12-28 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤2</View>
            <View>2021-12-29 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤3</View>
            <View>2021-12-30 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤4</View>
            <View>2021-12-31 12:30</View>
          </WKStep>
        </WKSteps>
      </View>
    </PageWrapper>
  );
};
```

## WKSteps 自定义 icon

```tsx
/**
 * title: WKSteps 自定义icon
 * desc: WKSteps 自定义icon
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKSteps, WKStep, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="WKSteps 自定义icon">
      <View style={{ width: '100%', padding: '0px 4px' }}>
        <WKSteps active={1} activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
          <WKStep>步骤1</WKStep>
          <WKStep>步骤2</WKStep>
          <WKStep>步骤3</WKStep>
          <WKStep>步骤4</WKStep>
        </WKSteps>

        <WKSteps
          direction="vertical"
          activeIcon="arrow-up"
          inactiveIcon="arrow-down"
          finishIcon="arrow-right"
          style={{ marginTop: '40rpx' }}
        >
          <WKStep>
            <View>步骤1</View>
            <View>2021-12-28 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤2</View>
            <View>2021-12-29 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤3</View>
            <View>2021-12-30 12:30</View>
          </WKStep>
          <WKStep>
            <View>步骤4</View>
            <View>2021-12-31 12:30</View>
          </WKStep>
        </WKSteps>
      </View>
    </PageWrapper>
  );
};
```

## WKStep 自定义 icon

```tsx
/**
 * title: WKStep 自定义icon
 * desc: WKStep 自定义icon
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKSteps, WKStep, View } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="WKStep 自定义icon">
      <View style={{ width: '100%', padding: '0px 4px' }}>
        <WKSteps active={1}>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            步骤1
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            步骤2
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            步骤3
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            步骤4
          </WKStep>
        </WKSteps>

        <WKSteps active={2} direction="vertical" style={{ marginTop: '40rpx' }}>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            <View>步骤1</View>
            <View>2021-12-28 12:30</View>
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            <View>步骤2</View>
            <View>2021-12-29 12:30</View>
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            <View>步骤3</View>
            <View>2021-12-30 12:30</View>
          </WKStep>
          <WKStep activeIcon="arrow-up" inactiveIcon="arrow-down" finishIcon="arrow-right">
            <View>步骤4</View>
            <View>2021-12-31 12:30</View>
          </WKStep>
        </WKSteps>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKSteps/index.d.ts'></API>
