Step 步骤

API#

Step#

属性	说明	类型	默认值
prefix	组件的品牌前缀	String	next-
current	当前步骤，从0开始	Number	0
direction	方向，可选：`horizontal`, `vertical`	String	horizontal
type	类型，可选：`circle`，`arrow`，`dot`	String	circle
className	类名，提供给外部复写样式	String	无

Step.Item#

属性	说明	类型	默认值
status	当前步骤状态，不传入可根据外层的Step的current属性，自动生成，可选：`wait`，`process`，`finish`	String	wait
title	标题	String or Element	无
percent	百分比	Number	无
icon	图标,仅限next支持的icon	String	无
content	内容，用于垂直状态下的内容填充，可以传入string或react element	Any	无
onClick	步骤节点的click回调	Function	无

代码演示

import 'blue/lib/step/index.scss';
import 'blue/lib/button/index.scss';
import Step, { Item as StepItem } from 'blue/lib/step';
import Button, { Group as ButtonGroup } from 'blue/lib/button';

class Component extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            currentStep: 3
        };
    }
    next() {
        const s = this.state.currentStep + 1;

        this.setState({
            currentStep: s > 6 ? 6 : s
        });
    }
    prev() {
        const s = this.state.currentStep - 1;

        this.setState({
            currentStep: s < 0 ? 0 : s
        });
    }
    onClick(currentStep) {
        console.log(currentStep);

        this.setState({
            currentStep: currentStep
        });
    }
    render() {
        const {currentStep} = this.state;

        return (
            <div>
                <Step current={currentStep}>
                    <StepItem title="步骤1" onClick={this.onClick.bind(this)} />
                    <StepItem title="步骤2" onClick={this.onClick.bind(this)} />
                    <StepItem title="步骤3" onClick={this.onClick.bind(this)} />
                    <StepItem title="步骤4" onClick={this.onClick.bind(this)} />
                    <StepItem title="步骤5" onClick={this.onClick.bind(this)} />
                    <StepItem title="步骤6" onClick={this.onClick.bind(this)} />
                </Step>
                <br />
                <br />
                <ButtonGroup>
                    <Button onClick={this.prev.bind(this)} type="primary" disabled={currentStep === 0}>上一步</Button>
                    <Button onClick={this.next.bind(this)} type="primary" disabled={currentStep === 6}>下一步</Button>
                </ButtonGroup>
            </div>
        );
    }
}

ReactDOM.render(<Component />, mountNode);

基本

普通模式，step定义为展示型组件，可以通过修改传入的current来修改当前的步骤，同时可以设置每个节点的click事件，来自定义回调。

import 'blue/lib/step/index.scss';
import Step, { Item as StepItem } from 'blue/lib/step';
import Icon from 'blue/lib/icon';

const contOne = (<span>打开冰箱<Icon type="box" />门</span>);
const contThree = (<p><span>关上冰箱<Icon type="box" />门</span></p>);

ReactDOM.render(<div>
    <h3>把大象装进冰箱的正确姿势</h3>
    <Step current={1} direction="vertical">
        <StepItem title="步骤1" content={contOne} icon="box" />
        <StepItem title="步骤2" content="把大象塞进去" />
        <StepItem title="步骤3" content={contThree} icon="smile" />
    </Step>
    <h3>把大象装进冰箱的正确姿势</h3>
    <Step current={1} direction="vertical" type="dot">
        <StepItem title="步骤1" content={contOne} icon="box" percent={40} />
        <StepItem title="步骤2" content="把大象塞进去" />
        <StepItem title="步骤3" content={contThree} icon="smile" />
    </Step>
</div>, mountNode);

垂直模式

垂直方向的步骤，仅点型和圆圈型的支持，箭头形不支持垂直模式

import 'blue/lib/step/index.scss';
import Step, { Item as StepItem } from 'blue/lib/step';

ReactDOM.render(<div>
    <h3>箭头型</h3>
    <Step current={1} type="arrow">
        <StepItem title="步骤1" />
        <StepItem title="步骤2" />
        <StepItem title="步骤3" disabled />
        <StepItem title="步骤4" />
    </Step>
    <h3>点型</h3>
    <Step current={1} type="dot">
        <StepItem title="步骤1" icon="atm" />
        <StepItem title="步骤2" />
        <StepItem title="步骤3" disabled />
        <StepItem title="步骤4" />
    </Step>
</div>, mountNode);

不同形状的步骤

箭头型和点型的步骤

import 'blue/lib/step/index.scss';
import Icon from 'blue/lib/icon';
import Step, { Item as StepItem } from 'blue/lib/step';

const contOne = (<span>打开冰箱<Icon type="box" />门</span>);
const contThree = (<span>关上冰箱<Icon type="box" />门</span>);

ReactDOM.render(<div>
    <h3>箭头型</h3>
    <Step current={1} type="arrow">
        <StepItem title={contOne} />
        <StepItem title="步骤2" />
        <StepItem title={contThree} />
    </Step>
    <h3>点型</h3>
    <Step current={1} type="dot">
        <StepItem title={contOne} icon="atm" />
        <StepItem title="步骤2" />
        <StepItem title={contThree} />
    </Step>
</div>, mountNode);

自定义Title

自定义传入元素

import 'blue/lib/step/index.scss';
import Step, { Item as StepItem } from 'blue/lib/step';
import Icon from 'blue/lib/icon';

const contOne = (<span>打开冰箱<Icon type="box" />门</span>);
const contThree = (<span>关上冰箱<Icon type="box" />门</span>);

ReactDOM.render(<div>
    <Step current={1} direction="vertical" >
        <StepItem title="步骤1" content={contOne} icon="box" />
        <StepItem title="步骤2" content="把大象塞进去" percent={40}/>
        <StepItem title="步骤3" content={contThree} icon="smile" />
    </Step>
</div>, mountNode);

百分比

带百分比的进度条，仅圆圈型的步骤支持