2016-03-31 09:40:55 +08:00
|
|
|
---
|
|
|
|
order: 3
|
2016-07-21 10:07:30 +08:00
|
|
|
title:
|
2016-11-09 14:45:10 +08:00
|
|
|
zh-CN: 步骤切换
|
|
|
|
en-US: Switch Step
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-06-25 16:01:04 +08:00
|
|
|
|
2016-07-21 10:07:30 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2016-11-09 14:45:10 +08:00
|
|
|
通常配合内容及按钮使用,表示一个流程的处理进度。
|
2015-06-25 20:01:20 +08:00
|
|
|
|
2016-07-21 10:07:30 +08:00
|
|
|
## en-US
|
|
|
|
|
2016-11-09 14:45:10 +08:00
|
|
|
Cooperate with the content and buttons, to represent the progress of a process.
|
2016-07-21 10:07:30 +08:00
|
|
|
|
2017-01-19 15:19:03 +08:00
|
|
|
````__react
|
2016-11-09 14:45:10 +08:00
|
|
|
import { Steps, Button, message } from 'antd';
|
2015-10-28 20:55:49 +08:00
|
|
|
const Step = Steps.Step;
|
2016-11-09 14:45:10 +08:00
|
|
|
|
|
|
|
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,
|
2015-11-25 17:35:49 +08:00
|
|
|
};
|
2016-11-09 14:45:10 +08:00
|
|
|
}
|
2015-09-16 16:28:57 +08:00
|
|
|
next() {
|
2016-11-09 14:45:10 +08:00
|
|
|
const current = this.state.current + 1;
|
|
|
|
this.setState({ current });
|
|
|
|
}
|
|
|
|
prev() {
|
|
|
|
const current = this.state.current - 1;
|
2016-07-21 14:20:49 +08:00
|
|
|
this.setState({ current });
|
2016-11-09 14:45:10 +08:00
|
|
|
}
|
2015-06-25 18:12:42 +08:00
|
|
|
render() {
|
2016-07-21 14:20:49 +08:00
|
|
|
const { current } = this.state;
|
2015-09-16 16:28:57 +08:00
|
|
|
return (
|
|
|
|
<div>
|
2016-07-21 14:20:49 +08:00
|
|
|
<Steps current={current}>
|
2016-11-09 14:45:10 +08:00
|
|
|
{steps.map(item => <Step key={item.title} title={item.title} />)}
|
2015-09-16 16:28:57 +08:00
|
|
|
</Steps>
|
2016-11-09 14:45:10 +08:00
|
|
|
<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
|
|
|
|
&&
|
2017-02-04 22:35:33 +08:00
|
|
|
<Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
|
2016-11-09 14:45:10 +08:00
|
|
|
Previous
|
|
|
|
</Button>
|
|
|
|
}
|
2015-09-16 16:28:57 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
2016-11-09 14:45:10 +08:00
|
|
|
}
|
|
|
|
}
|
2015-06-25 18:12:42 +08:00
|
|
|
|
2015-12-29 12:08:58 +08:00
|
|
|
ReactDOM.render(<App />, mountNode);
|
2015-06-25 20:01:20 +08:00
|
|
|
````
|
2016-11-09 14:45:10 +08:00
|
|
|
|
|
|
|
````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 {
|
2016-12-04 15:50:54 +08:00
|
|
|
margin-top: 24px;
|
2016-11-09 14:45:10 +08:00
|
|
|
}
|
|
|
|
````
|