mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-23 06:58:33 +08:00
96 lines
2.0 KiB
Markdown
96 lines
2.0 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 步骤切换
|
|
en-US: Switch Step
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
通常配合内容及按钮使用,表示一个流程的处理进度。
|
|
|
|
## en-US
|
|
|
|
Cooperate with the content and buttons, to represent the progress of a process.
|
|
|
|
````__react
|
|
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);
|
|
````
|
|
|
|
````css
|
|
.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;
|
|
}
|
|
````
|