mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-04 08:59:40 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
105 lines
1.9 KiB
Markdown
105 lines
1.9 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.
|
|
|
|
```tsx
|
|
import React, { useState } from 'react';
|
|
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',
|
|
},
|
|
];
|
|
|
|
const App: React.FC = () => {
|
|
const [current, setCurrent] = useState(0);
|
|
|
|
const next = () => {
|
|
setCurrent(current + 1);
|
|
};
|
|
|
|
const prev = () => {
|
|
setCurrent(current - 1);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<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={() => 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={() => prev()}>
|
|
Previous
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
```css
|
|
.steps-content {
|
|
min-height: 200px;
|
|
margin-top: 16px;
|
|
padding-top: 80px;
|
|
text-align: center;
|
|
background-color: #fafafa;
|
|
border: 1px dashed #e9e9e9;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.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>
|