Steps
Steps
is a navigation bar that guides users through the steps of a task.
When To Use#
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
Examples
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="first step" />
<Step title="second step" />
<Step title="third step" />
</Steps>
Steps#
The whole of the step bar.
Property | Description | Type | Default |
---|---|---|---|
current | to set the current step, counting from 0. You can overwrite this state by using status of Step | number | 0 |
direction | to specify the direction of the step bar, horizontal and vertical are currently supported | string | horizontal |
progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
size | to specify the size of the step bar, default and small are currently supported | string | default |
status | to specify the status of current step, can be set to one of the following values: wait process finish error | string | process |
Steps.Step#
A single step in the step bar.
Property | Description | Type | Default |
---|---|---|---|
description | description of the step, optional property | string|ReactNode | - |
icon | icon of the step, optional property | string|ReactNode | - |
status | to specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish error | string | wait |
title | title of the step | string|ReactNode | - |