飞冰下Step控件实现步骤条

安装方法

安装依赖

在JetBrains WebStorm编辑器控制台运行一下命令：

npm install @icedesign/base -S

引用方法

import { Step } from '@icedesign/base';

初始化数据

const { Item: StepItem } = Step;
const { Group: ButtonGroup } = Button;
//Step为每一步的的数据参数
constructor(props) {
        super(props);
        this.state = {
            Step: 3,
    }

render如下

render() {
const { Step } = this.state;
        return <div>
          <Step current={Step} readOnly>
          <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>

//上一步、下一步
 <ButtonGroup>
          <Button
            onClick={this.prev.bind(this)}
            type="primary"
            disabled={Step === 0}
          >
            上一步
          </Button>
          <Button
            onClick={this.next.bind(this)}
            type="primary"
            disabled={Step === 6}
          >
            下一步
          </Button>
        </ButtonGroup>
  <div>;

通过prev方法进行上一步，next方法进行下一步，并在onClic方法刷新状态

//下一步
  next() {
    const s = this.state.Step + 1;

    this.setState({
      Step: s > 6 ? 6 : s
    });
  }
//上一步
  prev() {
    const s = this.state.Step - 1;

    this.setState({
      Step: s < 0 ? 0 : s
    });
  }

  onClick(Step) {
    console.log(tStep);
    this.setState({
      Step: Step
    });
  }

效果如下图：

image.png

Step 有三种类型，可以通过 type 属性进行切换，默认圆形（type="circle"）。

箭头型 arrow:

image.png

点型 dot：

image.png