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.
The most basic step bar.
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
By setting like this: <Steps size="small">, you can get a mini version.
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
You can use your own custom icons by setting the property icon for Steps.Step.
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
Cooperate with the content and buttons, to represent the progress of a process.
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.
A simple step bar in the vertical direction.
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.
A simple mini version step bar in the vertical direction.
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
By using status of Steps, you can specify the state for current step.
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.
Steps with progress dot style.
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.
You can customize the display for Steps with progress dot style.
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 | - |