# Steps 步骤条

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/steps/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s35
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Steps]

## 代码演示

### 基础用法

简单的步骤条。

```jsx
import { Component } from 'react'
import { Steps, StepBaseProps, Button } from '@weapp/ui';

const datas1: Array<StepBaseProps> = [
  { title: 'First', description: 'This is description.' },
  { title: 'Second', description: 'This is description.', subTitle: 'click me' },
  { title: 'Last', description: 'This is description.',subTitle:'click me' },
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };
  nextStep = () => {
    this.setState((state: any) => {
      return {
        current: state.current + 1
      }
    });
  };

  render() {
    const { current } = this.state;
    return (
      <div >
        <div style={{ lineHeight: '30px' }}>基本使用 </div>
        <Steps direction="horizontal" current={current} onChange={this.onChange} data={datas1} />
      </div >

    )
  }

}
```

### 自定义图标

通过设置 Steps 中 data的 icon 属性，可以启用自定义图标。

```jsx
import React, { Component } from 'react'
import { Steps, StepBaseProps } from '@weapp/ui';

const datas: Array<StepBaseProps> = [
  { title: 'Draft', icon: 'Icon-draft-o' },
  { title: 'Check', icon: 'Icon-Valid-checked-invoice-o' },
  { title: 'Approval', icon: 'Icon-N-Contractapproval' },
  { title: 'Release', icon: 'Icon-N-Pushlog'},
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    return (
      <div >
        <div style={{ lineHeight: '30px', marginTop: '20px' }}></div>
        <Steps
          current={current}
          onChange={this.onChange}
          data={datas}
        />
      </div >

    )
  }

}
```

### 步骤切换

配合按钮使用，表示一个流程的处理进度。

```jsx
import { Component } from 'react'
import { Steps, StepBaseProps, Button } from '@weapp/ui';

const datas1: Array<StepBaseProps> = [
  { title: 'First' },
  { title: 'Second', description: 'disabled click.', disabled: true },
  { title: 'Third', subTitle: 'click me', description: 'disabled click.', disabled: true },
  { title: 'Last', description: 'disabled click.', disabled: true },
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };

  nextStep = () => {
    this.setState((state: any) => {
      return {
        current: state.current + 1
      }
    });
  };

  previousStep = () => {
    this.setState((state: any) => {
      return {
        current: state.current - 1
      }
    });
  };
  render() {
    const { current } = this.state;
    return (
      <div >
        <Steps direction="horizontal" current={current} onChange={this.onChange} data={datas1} />
        <div style={{ display: 'flex', justifyContent: 'space-evenly', margin: 15 }}>
          {current > 0 && <Button onClick={this.previousStep}>上一步</Button>}
          {current < datas1.length - 1 && <Button onClick={this.nextStep} type="primary"> 下一步</Button>}
        </div>
      </div >
    )
  }
}
```

### 垂直方向的步骤条

简单的竖直方向的步骤条。

```jsx
import { Component } from 'react'
import { Steps, StepBaseProps } from '@weapp/ui';
import { constants } from "@weapp/ui"
const prefixCls = `${constants.uiPcClsPrefix}-demo-steps`;

const datas1: Array<StepBaseProps> = [
  { title: 'Finished', subTitle: 'Left 00:00:08', description: 'This is a description.' },
  { title: 'In Progress', subTitle: 'Left 00:00:08', description: 'This is a description.' },
  { title: 'Waiting', subTitle: 'Click me ', description: 'This is a description.' },
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };
  render() {
    const { current } = this.state;
    return (
      <div className={prefixCls}>
        <Steps
          current={current}
          onChange={this.onChange}
          direction='vertical'
          data={datas1}
        />
      </div >

    )
  }

}
```

### 步骤运行状态

可以通过按钮控制步骤条状态，使用Steps中data的status属性，来控制当前步骤的状态。

```jsx
import React, { Component } from 'react'
import { Steps, StepBaseProps } from '@weapp/ui';

const datas4: Array<StepBaseProps> = [
  { title: 'Finish', status: 'finish' },
  { title: 'Process', status: 'process' },
  { title: 'Error', status: 'error' },
  { title: 'Waiting', status: 'wait' },
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };

  render() {
    return (
      <div >
        <div style={{ lineHeight: '30px', marginTop: '20px' }}> status 控制</div>
        <Steps data={datas4} />
      </div >

    )
  }

}
```

### 自定义内容

自定义渲染内容，自定义图标样式

```jsx
import { Component } from 'react'
import { Steps, StepBaseProps } from '@weapp/ui';

const datas1: Array<StepBaseProps> = [
  { title: 'First', subTitle: 'Left 00:00:08', },
  { title: 'Second', description: 'This is a description.' },
  { title: 'Third', iconStyle: { backgroundColor: '#edf7ed', color: '#1e4620', border: '1px solid #1e4620' } },
  { title: 'Last', iconColor: '#ef5350' },
  { title: 'Click Me.', labelSpace: 100,  }
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}

export default class StepDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0,
  }

  onChange = (current: number) => {
    this.setState({ current });
  };

  customRenderContent = (data: StepBaseProps, index: number) => {
    const { title } = data;
    return <>{title}</>
  }
  render() {
    const { current } = this.state;
    return (
      <div >
        <Steps
          current={current}
          onChange={this.onChange}
          data={datas1}
          labelSpace={0}
          customRenderContent={this.customRenderContent}
        />
      </div >

    )
  }

}
```

## API

### Steps参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| current | 指定当前步骤，从 0 开始记数 | number | 否 |  |
| direction | 展示方式 horizontal 水平 vertical 垂直 | 'horizontal' \| 'vertical' | 否 | horizontal |
| textAlign | 水平方向步骤条的·文字对齐方式 | 'left' \| 'center' | 否 | center |
| labelPlacement | 标签放置位置相对于图标的位置 | 'horizontal' \| 'vertical' | 否 | vertical |
| labelSpace | 图标和文字的距离 | Number | 否 | 10 |
| style | style 样式 | CSSProperties | 否 |  |
| onChange | 切换步骤时的回调 | (current: number) => void | 否 |  |
| data | 子组件的数据 | Array | 否 |  |
| customRender | 自定义渲染 | (_: Component, ele: ReactNode) => ReactNode | 否 |  |
| customRenderStep | 自定义渲染 | (data:StepBaseProps, index: number) => ReactNode | 否 |  |
| customRenderContent | 自定义渲染 | (data:StepBaseProps, index: number) => ReactNode | 否 |  |
### Steps.data 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |  |
| --- | --- | --- | --- | --- | --- |
| title | 标题 | ReactNode | 否 |  |  |
| subTitle | 子标题 | ReactNode | 否 |  |  |
| description | 步骤的详情描述，可选 | ReactNode | 否 |  |  |
| icon | 步骤图标的类型，可选 | string | ReactElement | 否 |  |
| disabled | 禁用点击 | boolean | 否 | false |  |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | 否 | wait |  |
| iconColor | 图标被选中时候的颜色 | string | 否 |  |  |
| iconStyle | 图标的背景颜色，文字颜色，边框颜色等 | CSSProperties | 否 |  |  |
