Steps步骤条
引导用户按照流程完成任务的导航条。
何时使用#
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。
代码演示
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
Finished
In Progress
Waiting
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps size="small" current={1}>
<Step title="Finished" />
<Step title="In Progress" />
<Step title="Waiting" />
</Steps>
, mountNode);
Login
Verification
Pay
Done
import { Steps, Icon } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps>
<Step status="finish" title="Login" icon={<Icon type="user" />} />
<Step status="finish" title="Verification" icon={<Icon type="solution" />} />
<Step status="process" title="Pay" icon={<Icon type="credit-card" />} />
<Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
</Steps>
, mountNode);
First
Second
Last
First-content
import { Steps, Button, message } from 'antd';
const Step = Steps.Step;
const steps = [{
title: 'First',
content: 'First-content',
}, {
title: 'Second',
content: 'Second-content',
}, {
title: 'Last',
content: 'Last-content',
}];
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
};
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
render() {
const { current } = this.state;
return (
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title} />)}
</Steps>
<div className="steps-content">{steps[this.state.current].content}</div>
<div className="steps-action">
{
this.state.current < steps.length - 1
&&
<Button type="primary" onClick={() => this.next()}>Next</Button>
}
{
this.state.current === steps.length - 1
&&
<Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
}
{
this.state.current > 0
&&
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
Previous
</Button>
}
</div>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps direction="vertical" current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps direction="vertical" size="small" current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
In Process
This is a description
Waiting
This is a description
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps current={1} status="error">
<Step title="Finished" description="This is a description" />
<Step title="In Process" description="This is a description" />
<Step title="Waiting" description="This is a description" />
</Steps>
, mountNode);
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
import { Steps } from 'antd';
const Step = Steps.Step;
ReactDOM.render(
<Steps progressDot current={1}>
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.
import { Steps, Popover } from 'antd';
const Step = Steps.Step;
const customDot = (dot, { status, index }) => (
<Popover content={<span>step {index} status: {status}</span>}>
{dot}
</Popover>
);
ReactDOM.render(
<Steps current={1} progressDot={customDot}>
<Step title="Finished" description="You can hover on the dot." />
<Step title="In Progress" description="You can hover on the dot." />
<Step title="Waiting" description="You can hover on the dot." />
<Step title="Waiting" description="You can hover on the dot." />
</Steps>
, mountNode);
API#
<Steps>
<Step title="第一步" />
<Step title="第二步" />
<Step title="第三步" />
</Steps>
Steps#
整体步骤条。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态 | number | 0 |
direction | 指定步骤条方向。目前支持水平(horizontal )和竖直(vertical )两种方向 | string | horizontal |
progressDot | 点状步骤条,可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
size | 指定大小,目前支持普通(default )和迷你(small ) | string | default |
status | 指定当前步骤的状态,可选 wait process finish error | string | process |
Steps.Step#
步骤条内的每一个步骤。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
description | 步骤的详情描述,可选 | string|ReactNode | - |
icon | 步骤图标的类型,可选 | string|ReactNode | - |
status | 指定状态。当不配置该属性时,会使用 Steps 的 current 来自动指定状态。可选:wait process finish error | string | wait |
title | 标题 | string|ReactNode | - |