飞冰下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 

          
          
          
          
          
          
          
        

//上一步、下一步
 
          
            上一步
          
          
            下一步
          
        
  
;

通过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