# MSteps 步骤条

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

## 代码演示

### 基础用法

步骤条的基础用法，可通过direction="vertical"设置步骤条的方向，引导用户按照流程完成任务。

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

const datas1: Array<StepBaseProps> = [
  { title: '订单', description: '描述' },
  { title: '商务审核', description: '描述' },
  { title: '上报提交', },
]

const dataStatus: Array<StepBaseProps> = [
  { title: '第一步', status: "finish" },
  { title: '第二步', status: "process" },
  { title: '第三步', status: "error" },
  { title: '第四步', status: "wait" },
]

export default class MStepsDemo extends Component {

  render() {
    return (
      <div className={prefixCls}>
        <div>
          <h3>横向步骤条</h3>
          <MSteps
            current={1}
            data={datas1}
          />
        </div>

        <div>
          <h3>横向步骤条状态</h3>
          <MSteps
            data={dataStatus}
          />
        </div>

        <div style={{ height: 180 }}>
          <h3>纵向步骤条</h3>
          <MSteps
            current={1}
            data={datas1}
            direction="vertical"
          />
        </div>

        <div style={{ height: 180, paddingTop: 10 }}>
          <h3>纵向步骤条状态</h3>
          <MSteps
            data={dataStatus}
            direction="vertical"
          />
        </div>
      </div >
    )
  }
}
```

### 自定义属性

设置onChange，可以手动点击某个步骤，也可以通过其他按钮更改步骤的进度。可以自定义渲染content和自定义图标。

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

const datas1: Array<StepBaseProps> = [
  { title: '订单' },
  { title: '商务审核', description: '点我' },
  { title: '上报提交', subTitle: 'click me' },
]

const datasIcon: Array<StepBaseProps> = [
  { title: '起草', icon: 'Icon-draft-o', },
  { title: '审核', icon: "Icon-Check-o", },
  { title: '上报提交', icon: "Icon-N-public-o", },
]

const dataStyle: Array<StepBaseProps> = [
  { title: '第一步', },
  { title: '第二步', iconStyle: { border: '1px solid purple' ,backgroundColor:'yellowgreen'} },
  { title: '第三步', },
]

interface MStepsDemoProps {
  weId?: string
}

interface MStepsDemoState {
  current?: number
}
export default class MStepsDemo extends Component<MStepsDemoProps, MStepsDemoState> {

  state = {
    current: 0
  }

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

  onchange = (step: number) => {
    this.setState({ current: step })
  }
  customRenderContent = (data: StepBaseProps, index: number) => {
    return <div className={`${prefixCls}-custom-content`}>{data.title}<br />{data.subTitle}</div>
  }

  render() {
    const { current } = this.state
    return (
      <div className={prefixCls}>
        <div>
          <h3>自定义事件控制步骤</h3>
          <MSteps
            onChange={this.onchange}
            current={current}
            data={datas1}
          />
          <MButton size="small" onClick={this.nextStep} type="primary" style={{ width: "100px" }}>next</MButton>
        </div>

        <div>
          <h3>自定义图标</h3>
          <MSteps
            current={1}
            data={datas1}
          />
        </div>

        <div>
          <h3>自定义content</h3>
          <MSteps
            current={1}
            data={datasIcon}
            customRenderContent={this.customRenderContent}
          />
        </div>

        <div>
          <h3>自定义icon样式</h3>
          <MSteps
            current={current}
            data={dataStyle}
            onChange={this.onchange}

          />
        </div>
      </div >

    )
  }

}
```

## API

### MSteps参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| 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 | 否 |  |
### MSteps.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 | 否 |  |  |
