Step 步骤

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

API

Step

参数说明类型默认值
current当前步骤Number0
shape类型可选值:'circle', 'arrow', 'dot'Enum'circle'
direction展示方向可选值:'hoz', 'ver'Enum'hoz'
labelPlacement横向布局时的内容排列可选值:'hoz', 'ver'Enum'ver'
readOnly是否只读模式Boolean-
animation是否开启动效Booleantrue
itemRenderStepItem 的自定义渲染签名:Function(index: Number, status: String) => Node参数:index: {Number} 节点索引status: {String} 节点状态返回值:{Node} 节点的渲染结果Functionnull

Step.Item

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

代码示例

基本

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

circle类型可通过labelPlacement设置文本排列方向。

Step 步骤 - 图1

查看源码在线预览

  1. import { Step } from '@alifd/next';
  3. const steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item[0]} content={item[1]}/>);
  5. ReactDOM.render(<div>
  6.     <h3>Arrow</h3>
  7.     <Step current={1} shape="arrow">
  8.         {steps}
  9.     </Step>
  11.     <h3>Circle</h3>
  12.     <Step current={1} shape="circle">
  13.         {steps}
  14.     </Step>
  16.     <h3>Circle(Horizontal content)</h3>
  17.     <Step current={1} shape="circle" labelPlacement="hoz">
  18.         {steps}
  19.     </Step>
  21.     <h3>Dot</h3>
  22.     <Step current={1} shape="dot">
  23.         {steps}
  24.     </Step>
  26. </div>, mountNode);

垂直模式

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

Step 步骤 - 图2

查看源码在线预览

  1. import { Step } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Step current={1} direction="ver" animation={false}>
  5.         <Step.Item title="Step 1" content="Open the refrigerator door" />
  6.         <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
  7.         <Step.Item title="Step 3" content="Close the refrigerator door" />
  8.     </Step>
  10.     <br /><br />
  11.     <Step current={1} direction="ver" shape="dot" animation={false}>
  12.         <Step.Item title="Step 1" content="Open the refrigerator door" />
  13.         <Step.Item title="Step 2" content="Put the elephant in the refrigerator" />
  14.         <Step.Item title="Step 3" content="Close the refrigerator door" />
  15.     </Step>
  16. </div>, mountNode);

图标和百分比

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

Step 步骤 - 图3

查看源码在线预览

  1. import { Step } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Step current={1} animation={false} shape="dot">
  5.         <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
  6.         <Step.Item title="Step 2" content="Put the elephant in the refrigerator" percent={40}/>
  7.         <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
  8.     </Step>
  9.     <br />
  10.     <br />
  11.     <Step current={1} animation={false}>
  12.         <Step.Item title="Step 1" content="Open the refrigerator door" icon="calendar" />
  13.         <Step.Item title="Step 2" content="Put the elephant in the refrigerator" percent={40}/>
  14.         <Step.Item title="Step 3" content="Close the refrigerator door" icon="smile" />
  15.     </Step>
  16. </div>, mountNode);

禁用步骤项

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

Step 步骤 - 图4

查看源码在线预览

  1. import { Step } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Step current={1} shape="arrow">
  5.         <Step.Item title="Step 1" />
  6.         <Step.Item title="Step 2" />
  7.         <Step.Item title="Step 3" disabled />
  8.         <Step.Item title="Step 4" />
  9.     </Step>
  10.     <br />
  11.     <br />
  12.     <Step current={1} shape="dot">
  13.         <Step.Item title="Step 1" />
  14.         <Step.Item title="Step 2" />
  15.         <Step.Item title="Step 3" disabled />
  16.         <Step.Item title="Step 4" />
  17.     </Step>
  18.     <br />
  19.     <br />
  20.     <Step current={1} shape="circle">
  21.         <Step.Item title="Step 1" />
  22.         <Step.Item title="Step 2" />
  23.         <Step.Item title="Step 3" disabled />
  24.         <Step.Item title="Step 4" />
  25.     </Step>
  26. </div>, mountNode);

Step.Item 自定义渲染

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

Step 步骤 - 图5

查看源码在线预览

  1. import { Step, Icon } from '@alifd/next';
  3. const steps = ['one', 'two', 'three', 'four'];
  5. function itemRender(index) {
  6.     return <div className="custom-node1"><span>{index + 1}</span></div>;
  7. }
  9. function itemRender2(index, status) {
  10.     return <div className="custom-node2">{status === 'finish' ? <Icon type="success" /> : <span>{index + 1}</span>} </div>;
  11. }
  13. ReactDOM.render(<div className="fusion-demo">
  14.     <div className="fusion-demo-item">
  15.         <Step current={2} animation={false} itemRender={itemRender}>
  16.             {
  17.                 steps.map(item => <Step.Item key={item} title={item} />)
  18.             }
  19.         </Step>
  20.     </div>
  22.     <div className="fusion-demo-item">
  23.         <Step current={2} animation={false} itemRender={itemRender2}>
  24.             {
  25.                 steps.map(item => <Step.Item key={item} title={item} />)
  26.             }
  27.         </Step>
  28.     </div>
  29. </div>, mountNode);
  1. .fusion-demo-item {
  2.     margin: 15px 0;
  3. }
  4. .custom-node1 {
  5.     height: 100%;
  6.     width: 100%;
  7.     border-radius: 20%;
  8.     border: 1px dashed #3E71F1;
  9.     text-align: center;
  10. }
  11. .custom-node1 span {
  12.     font-size: 12px;
  14.     position: absolute;
  15.     top: 50%;
  16.     text-align: center;
  17.     width: 100%;
  18.     left: 0;
  19.     transform: translateY(-50%);
  20. }
  21. .custom-node2 {
  22.     height: 100%;
  23.     width: 100%;
  24.     border-radius: 20%;
  25.     border: 1px dashed #3E71F1;
  26.     text-align: center;
  27.     background: #3E71F1;
  28.     color: #fff;
  29.     position: relative;
  30. }
  32. .custom-node2 span, .custom-node2 i {
  33.     position: absolute;
  34.     top: 50%;
  35.     transform: translateY(-50%);
  36.     left: 0;
  37.     width: 100%;
  38.     text-align: center;
  39. }

只读模式

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

Step 步骤 - 图6

查看源码在线预览

  1. import { Step, Button } from '@alifd/next';
  3. const StepItem = Step.Item, ButtonGroup = Button.Group;
  4. class Component extends React.Component {
  5.     constructor(props) {
  6.         super(props);
  8.         this.state = {
  9.             currentStep: 3
  10.         };
  11.     }
  12.     next() {
  13.         const s = this.state.currentStep + 1;
  15.         this.setState({
  16.             currentStep: s > 6 ? 6 : s
  17.         });
  18.     }
  19.     prev() {
  20.         const s = this.state.currentStep - 1;
  22.         this.setState({
  23.             currentStep: s < 0 ? 0 : s
  24.         });
  25.     }
  26.     onClick(currentStep) {
  27.         console.log(currentStep);
  29.         this.setState({
  30.             currentStep: currentStep
  31.         });
  32.     }
  33.     render() {
  34.         const {currentStep} = this.state;
  36.         return (
  37.             <div>
  38.                 <Step current={currentStep} readOnly>
  39.                     <StepItem title="Step 1" onClick={this.onClick.bind(this)} />
  40.                     <StepItem title="Step 2" onClick={this.onClick.bind(this)} />
  41.                     <StepItem title="Step 3" onClick={this.onClick.bind(this)} />
  42.                     <StepItem title="Step 4" onClick={this.onClick.bind(this)} />
  43.                     <StepItem title="Step 5" onClick={this.onClick.bind(this)} />
  44.                     <StepItem title="Step 6" onClick={this.onClick.bind(this)} />
  45.                 </Step>
  46.                 <br />
  47.                 <br />
  48.                 <ButtonGroup>
  49.                     <Button onClick={this.prev.bind(this)} type="primary" disabled={currentStep === 0}>Backward</Button>
  50.                     <Button onClick={this.next.bind(this)} type="primary" disabled={currentStep === 6}>Forward</Button>
  51.                 </ButtonGroup>
  52.             </div>
  53.         );
  54.     }
  55. }
  57. ReactDOM.render(<Component />, mountNode);

受控模式

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

Step 步骤 - 图7

查看源码在线预览

  1. import { Step, Button, Select } from '@alifd/next';
  3. const StepItem = Step.Item, ButtonGroup = Button.Group;
  5. class Component extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  9.         this.state = {
  10.             currentStep: 3,
  11.             stepType: 'circle',
  12.             stepAnimation: true,
  13.             labelPlacement: 'ver'
  14.         };
  16.         this.onClick = this.onClick.bind(this);
  17.     }
  18.     next() {
  19.         const s = this.state.currentStep + 1;
  21.         this.setState({
  22.             currentStep: s > 6 ? 6 : s
  23.         });
  24.     }
  25.     prev() {
  26.         const s = this.state.currentStep - 1;
  28.         this.setState({
  29.             currentStep: s < 0 ? 0 : s
  30.         });
  31.     }
  32.     onClick(currentStep) {
  33.         console.log(currentStep);
  35.         this.setState({
  36.             currentStep: currentStep
  37.         });
  38.     }
  39.     onStepTypeChange(value) {
  40.         this.setState({ stepType: value });
  41.     }
  42.     onStepAnimation(value) {
  43.         this.setState({ stepAnimation: value });
  44.     }
  45.     onLabelPlacementChange(value) {
  46.         this.setState({ labelPlacement: value });
  47.     }
  48.     render() {
  49.         const {currentStep} = this.state;
  51.         return (
  52.             <div>
  53.                 <div className="custom-step-option">
  54.                     <Select placeholder="Choose the dispaly type" onChange={this.onStepTypeChange.bind(this)} className="custom-select" defaultValue="circle">
  55.                         {
  56.                             ['circle', 'arrow', 'dot'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)
  57.                         }
  58.                     </Select>
  60.                     <Select placeholder="Label placement" onChange={this.onLabelPlacementChange.bind(this)} className="custom-select" defaultValue="ver">
  61.                         {
  62.                             ['hoz', 'ver'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)
  63.                         }
  64.                     </Select>
  67.                     <Select placeholder="Enable animation" onChange={this.onStepAnimation.bind(this)} className="custom-select" defaultValue>
  68.                         {
  69.                             [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'animation on' : 'animation off'}</Select.Option>)
  70.                         }
  71.                     </Select>
  72.                 </div>
  74.                 <Step current={currentStep} shape={this.state.stepType} animation={this.state.stepAnimation} labelPlacement={this.state.labelPlacement}>
  75.                     <StepItem title="Step 1" onClick={this.onClick} content="Description" />
  76.                     <StepItem title="Step 2" onClick={this.onClick} content="Description" />
  77.                     <StepItem title="Step 3" onClick={this.onClick} content="Description" />
  78.                     <StepItem title="Step 4" onClick={this.onClick} content="Description" />
  79.                     <StepItem title="Step 5" onClick={this.onClick} content="Description" />
  80.                     <StepItem title="Step 6" onClick={this.onClick} content="Description" />
  81.                 </Step>
  82.                 <br />
  83.                 <br />
  84.                 <ButtonGroup>
  85.                     <Button onClick={this.prev.bind(this)} type="primary" disabled={currentStep === 0}>Backward</Button>
  86.                     <Button onClick={this.next.bind(this)} type="primary" disabled={currentStep === 6}>Forward</Button>
  87.                 </ButtonGroup>
  88.             </div>
  89.         );
  90.     }
  91. }
  93. ReactDOM.render(<Component />, mountNode);
  1. .custom-step-option {
  2.     margin-bottom: 20px;
  3. }
  5. .custom-select {
  6.     margin-right: 20px;
  7. }

相关区块

Step 步骤 - 图8

暂无相关区块