mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 07:09:55 +08:00
a823400b79
* docs: optimize site of components 1 * fix: lint * fix: use space * fix: snap * revert: button demo * fix snap
114 lines
2.2 KiB
Markdown
114 lines
2.2 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.
|
|
|
|
```jsx
|
|
import { Steps, Button, message } from 'antd';
|
|
|
|
const { Step } = Steps;
|
|
|
|
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[current].content}</div>
|
|
<div className="steps-action">
|
|
{current < steps.length - 1 && (
|
|
<Button type="primary" onClick={() => this.next()}>
|
|
Next
|
|
</Button>
|
|
)}
|
|
{current === steps.length - 1 && (
|
|
<Button type="primary" onClick={() => message.success('Processing complete!')}>
|
|
Done
|
|
</Button>
|
|
)}
|
|
{current > 0 && (
|
|
<Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
|
|
Previous
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<App />, mountNode);
|
|
```
|
|
|
|
```css
|
|
.steps-content {
|
|
margin-top: 16px;
|
|
border: 1px dashed #e9e9e9;
|
|
border-radius: 2px;
|
|
background-color: #fafafa;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.steps-action {
|
|
margin-top: 24px;
|
|
}
|
|
```
|
|
|
|
<style>
|
|
[data-theme="dark"] .steps-content {
|
|
margin-top: 16px;
|
|
border: 1px dashed #303030;
|
|
background-color: rgba(255,255,255,0.04);
|
|
color: rgba(255,255,255,0.65);
|
|
padding-top: 80px;
|
|
}
|
|
</style>
|