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={["合作信息","公司信息","资质信息"]} />
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