# Steps

步骤组件

- 通过list设置步骤过程名称数组，如["合作信息","公司信息","资质信息"]，必需。
- 可通过currentStep设置当前步骤，从0开始计算。
- 可通过clickCallback设置点击步骤的回调，函数返回步骤名称和索引。
- 可通过readOnly设置步骤是否只读不可点击，默认可点击。

主要属性和接口：

- list:初始进度百分比, 默认0。
  如: `<Steps list={["合作信息","公司信息","资质信息"]} />`
- currentStep:当前步骤，从0开始计算，默认0。
  如: `<Steps currentStep={1} list={["合作信息","公司信息","资质信息"]} />`
- clickCallback:点击步骤的回调，函数返回步骤名称和索引。
  如: `<Steps clickCallback={(str,index)=>{console.log(index);}} list={["合作信息","公司信息","资质信息"]}/>`
- readOnly:只读不可点击，默认false。
  如: `<Steps readOnly list={["合作信息","公司信息","资质信息"]} />`

### 方法

- clickCallback

### 属性

- classPrefix
- currentStep
- list
- readOnly

### 事件

Extends Component
Defined in: `src/Steps.js:7`
Module: 操作类组件

Available since 1.7.0

## Constructor

### Steps

`Steps ()`

Defined in `src/Steps.js:7`

Available since 1.7.0

#### Example:

    import React, { Component } from "react";
    import {Steps} from "phoenix-ui";
    import Code from "./code/code";

    export default class steps extends Component{

        constructor(props,context){
            super(props,context);

            this.state = {
                index: 2,
                list1: ["合作信息","公司信息","资质信息","资质信息"],
                list2: ["合作信息","公司信息","资质信息","公司信息","资质信息","公司信息"]
            };
        }

        clickCallback(str, index){
            alert("name: "+str+", index: "+index);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Steps</h2>
                    <h3 className="comp-type">list(默认[],必需) 步骤名称列表，根据顺序排列</h3>
                    <div className="content">
                        <Steps list={["合作信息","公司信息","资质信息"]} />
                    </div>
                    <Code target="steps-list" />

                    <h3 className="comp-type">currentStep(默认0) 当前步骤(从0开始)</h3>
                    <div className="content">
                        <Steps currentStep={2} list={this.state.list1} />
                    </div>
                    <Code target="steps-currentstep" />

                    <h3 className="comp-type">clickCallback(默认null) 选择步骤的回调函数</h3>
                    <div className="content">
                        <Steps clickCallback={::this.clickCallback} list={this.state.list1}/>
                    </div>
                    <Code target="steps-clickcallback" />

                    <h3 className="comp-type">readOnly(默认false) 是否只读，只读时不可点击选择步骤</h3>
                    <div className="content">
                        <Steps readOnly list={this.state.list2} />
                    </div>
                    <Code target="steps-readonly" />
                </div>
            );
        }
    }

## 方法

### clickCallback

`clickCallback ()`

Defined in `src/Steps.js:63`

点击每一步的回调，function(str,index){} str为步骤名称，index为第几步（从1开始计数）

## 属性

### `classPrefix`

String

Defined in `src/Steps.js:35`

样式前缀

Default:

`'badge'`

### `currentStep`

Number

Defined in `src/Steps.js:56`

当前处于第几步，默认为0，也就是说所有的步骤都没有开始，如果到第一步的话将currentStep设置为1即可，注意currentStep不可以超过list数组长度

Default:

`0`

### `list`

Array

Defined in `src/Steps.js:49`

steps内容数组，把每一步的文案放入数组中作为list的值

Default:

`[]`

### `readOnly`

Boolean

Defined in `src/Steps.js:42`

是否为只读模式（只读模式不会触发点击回调），默认为false

Default:

`false`