Steps 步骤条
引导用户按照流程完成任务的导航条。
何时使用#
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。
API#
<Steps>
<Steps.Step title="第一步"></Steps.Step>
<Steps.Step title="第二步"></Steps.Step>
<Steps.Step title="第三步"></Steps.Step>
</Steps>
Steps#
整体步骤条。
参数 |
说明 |
类型 |
可选值 |
默认值 |
current |
可选参数,指定当前处理正在执行状态的步骤,从0开始记数。在子Step元素中,可以通过status属性覆盖状态。 |
number |
无 |
0 |
size |
可选参数,指定大小(目前只支持普通和迷你两种大小)。 |
string |
small, default |
default |
direction |
可选参数,指定步骤条方向(目前支持水平和竖直两种方向,默认水平方向)。 |
string |
vertical |
无 |
maxDescriptionWidth |
可选参数,指定步骤的详细描述文字的最大宽度。 |
number |
无 |
100 |
Steps.Step#
步骤条内的每一个步。
参数 |
说明 |
类型 |
可选值 |
默认值 |
status |
可选参数,指定状态。当不配置该属性时,会使用父Steps元素的current来自动指定状态。 |
string |
wait, process, finish |
wait |
title |
必要参数,标题。 |
string/jsx |
无 |
无 |
description |
可选参数,步骤的详情描述。 |
string/jsx |
无 |
空 |
icon |
可选参数,步骤的Icon。如果不指定,则使用默认的样式。 |
string/jsx |
无 |
空 |
代码演示
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是多信息的描述啊'
}, {
title: '进行中',
description: '这里是多信息的耶哦耶哦哦耶哦耶'
}, {
title: '又一个待运行',
description: '描述啊描述啊'
}, {
title: '待运行',
description: '这里是多信息的描述啊'
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
status: 'finish',
title: '已完成'
}, {
status: 'process',
title: '进行中'
}, {
status: 'wait',
title: '待运行'
}, {
status: 'wait',
title: '待运行'
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(<Steps>
<Step status="finish" title="步骤1" icon="cloud" />
<Step status="process" title="步骤2" icon="apple" />
<Step status="wait" title="步骤3" icon="github" />
</Steps>, mountNode);
#components-steps-demo-step-next > div > div {
margin-bottom: 30px;
}
import { Steps, Button } from 'antd';
const Step = Steps.Step;
const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
const steps = array.map((item, i) => {
return {
title: `步骤${i + 1}`
};
});
const App = React.createClass({
getInitialState() {
return {
currentStep: Math.floor(Math.random() * steps.length)
};
},
next() {
let s = this.state.currentStep + 1;
if (s === steps.length) {
s = 0;
}
this.setState({
currentStep: s
});
},
render() {
const cs = this.state.currentStep;
return (
<div>
<div>当前正在执行第 {cs + 1} 步</div>
<Steps current={cs}>
{steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
</Steps>
<div>
<Button onClick={this.next}>下一步</Button>
</div>
</div>
);
}
});
ReactDOM.render(<App />, mountNode);
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是信息的描述'
}, {
title: '进行中',
description: '这里是信息的描述'
}, {
title: '待运行',
description: '这里是信息的描述'
}, {
title: '又一个待运行',
description: '这里是信息的描述'
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
mountNode);
import { Steps } from 'antd';
const Step = Steps.Step;
const steps = [{
title: '已完成',
description: '这里是信息的描述'
}, {
title: '进行中',
description: '这里是信息的描述'
}, {
title: '待运行',
description: '这里是信息的描述'
}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
mountNode);