Steps

步骤组件

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

主要属性和接口：

  • list:初始进度百分比, 默认0。
    如: <Steps list={['合作信息','公司信息','资质信息']} />
  • index:当前步骤，从0开始计算，默认0。
    如: <Steps index={1} list={['合作信息','公司信息','资质信息']} />
  • clickCallback:点击步骤的回调，函数返回步骤名称和索引。
    如: <Steps clickCallback={(str,index)=>{console.log(index);}} list={['合作信息','公司信息','资质信息']}/>
  • readOnly:只读不可点击，默认false。
    如: <Steps readOnly list={['合作信息','公司信息','资质信息']} />
Extends Component
Defined in: src/steps/index.js:10
Module: 操作类组件

Available since 1.7.0

Constructor

Steps

Steps ()

Defined in src/steps/index.js:10

Available since 1.7.0

Example:

import React, { Component } from "react"

import Steps from "phoenix-ui/lib/steps"
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>
                <Steps list={["合作信息","公司信息","资质信息"]} />
                <Code target="steps-list" />

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

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

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

方法

clickCallback

clickCallback
(
  • name
  • index
)

Defined in src/steps/index.js:66

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

参数:

name String

步骤名称
index Number

第几步
参数名类型标识描述
name String

步骤名称

index Number

第几步

属性

classPrefix

String

Defined in src/steps/index.js:38

样式前缀

Default:

'badge'

index

Number

Defined in src/steps/index.js:59

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

Default:

0

list

Array

Defined in src/steps/index.js:52

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

Default:

[]

readOnly

Boolean

Defined in src/steps/index.js:45

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

Default:

false