Step 步骤

Step 步骤

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

可以通过 animation 属性关闭步骤条的动画，使 Step 变为纯展示型。

API

步骤

参数	说明	类型	默认值
prefix	样式的品牌前缀	String	'next-'
current	当前步骤	Number	0
direction	展示方向可选值:'horizontal', 'vertical'	Enum	'horizontal'
type	类型可选值:'circle', 'arrow', 'dot'	Enum	'circle'
readOnly	是否只读模式	Boolean	-
animation	是否开启动效	Boolean	true
className	自定义样式名	String	-

Step.Item

参数	说明	类型	默认值
prefix	组件的样式品牌前缀	String	-
status	步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 `wait`, `process`, `finish`可选值:'wait', 'process', 'finish'	Enum	-
title	标题	ReactNode	-
icon	图标	String	-
content	内容，用于垂直状态下的内容填充	ReactNode	-
itemRender	StepItem 的自定义渲染签名:Function(index: Number, status: String) => Node参数:index: {Number} 节点索引status: {String} 节点状态返回值:{Node} 节点的渲染结果	Function	-
percent	百分比	Number	-
disabled	是否禁用	Boolean	-
onClick	点击步骤时的回调签名:Function(index: Number) => void参数:index: {Number} 节点索引	Function	() => {}
className	自定义样式	String	-

代码示例

基本

在最简单的情况下，Step 有三种类型，可以通过 type 属性进行切换。

查看源码在线预览

import { Step } from "@icedesign/base";
const steps = ["打开冰箱门", "把大象放进冰箱", "关上冰箱门"].map(
  (item, index) => <Step.Item key={index} title={item} />
);
ReactDOM.render(
  <div>
    <h3>箭头型</h3>
    <Step current={1} type="arrow">
      {steps}
    </Step>
    <h3>圆型</h3>
    <Step current={1} type="circle">
      {steps}
    </Step>
    <h3>点型</h3>
    <Step current={1} type="dot">
      {steps}
    </Step>
  </div>,
  mountNode
);

受控模式

默认情况下，Step 定义为展示型组件，上层组件可以通过修改传入的 current 属性值来修改当前的步骤，同时可以设置每个节点的 click 事件，来自定义回调。

查看源码在线预览

import { Step, Button, Select } from "@icedesign/base";
const { Item: StepItem } = Step;
const { Group: ButtonGroup } = Button;
class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 3,
      stepType: "circle",
      stepAnimation: true
    };
    this.onClick = this.onClick.bind(this);
  }
  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
    });
  }
  onStepTypeChange(value) {
    this.setState({ stepType: value });
  }
  onStepAnimation(value) {
    this.setState({ stepAnimation: value });
  }
  render() {
    const { currentStep } = this.state;
    return (
      <div>
        <div className="custom-step-option">
          <Select
            placeholder="选择展示类型"
            onChange={this.onStepTypeChange.bind(this)}
            className="custom-select"
          >
            {["circle", "arrow", "dot"].map(item => (
              <Select.Option value={item} key={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
          <Select
            placeholder="是否开启动效"
            onChange={this.onStepAnimation.bind(this)}
            className="custom-select"
          >
            {[true, false].map((item, index) => (
              <Select.Option value={item} key={index}>
                {item ? "开启动效" : "关闭动效"}
              </Select.Option>
            ))}
          </Select>
        </div>
        <Step
          current={currentStep}
          type={this.state.stepType}
          animation={this.state.stepAnimation}
        >
          <StepItem title="步骤1" onClick={this.onClick} />
          <StepItem title="步骤2" onClick={this.onClick} />
          <StepItem title="步骤3" onClick={this.onClick} />
          <StepItem title="步骤4" onClick={this.onClick} />
          <StepItem title="步骤5" onClick={this.onClick} />
          <StepItem title="步骤6" onClick={this.onClick} />
        </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);

.custom-step-option {
    margin-bottom: 20px;
}
.custom-select {
    margin-right: 20px;
}

Step.Item 自定义渲染

用户可以通过传递 itemRender 属性进行自定义的渲染。Step.Item 默认有三种状态，分别是 wait, process, finish。

查看源码在线预览

import { Step, Icon } from "@icedesign/base";
const steps = ["one", "two", "three", "four"];
function itemRender(index, status) {
  return index + 1;
}
function itemRender2(index, status) {
  return status === "finish" ? <Icon type="good" /> : index + 1;
}
ReactDOM.render(
  <div className="fusion-demo">
    <div className="fusion-demo-item">
      <Step current={2} animation={false}>
        {steps.map(item => (
          <Step.Item key={item} title={item} itemRender={itemRender} />
        ))}
      </Step>
    </div>
    <div className="fusion-demo-item">
      <Step current={2} animation={false}>
        {steps.map(item => (
          <Step.Item key={item} title={item} itemRender={itemRender2} />
        ))}
      </Step>
    </div>
  </div>,
  mountNode
);

.fusion-demo-item {
    margin: 15px 0;
}

垂直模式

箭头形不支持垂直模式。对于点型和圆圈型的 Step 组件而言，可以通过设置 direction 属性设置其展示方向为垂直。

查看源码在线预览

import { Step, Icon } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>把大象装进冰箱的正确姿势</h3>
    <Step current={1} direction="vertical" animation={false}>
      <Step.Item title="步骤1" content="打开冰箱门" />
      <Step.Item title="步骤2" content="把大象塞进去" />
      <Step.Item title="步骤3" content="关上冰箱门" />
    </Step>
    <h3>把大象装进冰箱的正确姿势</h3>
    <Step current={1} direction="vertical" type="dot" animation={false}>
      <Step.Item title="步骤1" content="打开冰箱门" />
      <Step.Item title="步骤2" content="把大象塞进去" />
      <Step.Item title="步骤3" content="关上冰箱门" />
    </Step>
  </div>,
  mountNode
);

禁用步骤项

可以通过在 Step.Item 上设置 disabled 属性来禁用某个步骤。

查看源码在线预览

import { Step } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Step current={1} type="arrow">
      <Step.Item title="步骤1" />
      <Step.Item title="步骤2" />
      <Step.Item title="步骤3" disabled />
      <Step.Item title="步骤4" />
    </Step>
    <br />
    <br />
    <Step current={1} type="dot">
      <Step.Item title="步骤1" />
      <Step.Item title="步骤2" />
      <Step.Item title="步骤3" disabled />
      <Step.Item title="步骤4" />
    </Step>
    <br />
    <br />
    <Step current={1} type="circle">
      <Step.Item title="步骤1" />
      <Step.Item title="步骤2" />
      <Step.Item title="步骤3" disabled />
      <Step.Item title="步骤4" />
    </Step>
  </div>,
  mountNode
);

图标和百分比

可以在点型和圆形步骤条中使用图标，圆形步骤条还只是使用百分比。

查看源码在线预览

import { Step, Icon } from "@icedesign/base";
ReactDOM.render(
  <div>
    <Step current={1} animation={false} type="dot">
      <Step.Item title="步骤1" content="打开冰箱门" icon="box" />
      <Step.Item title="步骤2" content="把大象塞进去" percent={40} />
      <Step.Item title="步骤3" content="关闭冰箱门" icon="smile" />
    </Step>
    <br />
    <br />
    <Step current={1} animation={false}>
      <Step.Item title="步骤1" content="打开冰箱门" icon="box" />
      <Step.Item title="步骤2" content="把大象塞进去" percent={40} />
      <Step.Item title="步骤3" content="关闭冰箱门" icon="smile" />
    </Step>
  </div>,
  mountNode
);

只读模式

只读模式，不可触发回调。

查看源码在线预览

import { Step, Button } from "@icedesign/base";
const { Item: StepItem } = Step;
const { Group: ButtonGroup } = 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} 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>
        <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 步骤

Step 步骤

安装方法

Guide

API

步骤

Step.Item

代码示例

相关区块

暂无相关区块