2020-07-27 21:40:36 +08:00
|
|
|
---
|
|
|
|
order: 13
|
|
|
|
title:
|
|
|
|
zh-CN: 带有进度的步骤
|
|
|
|
en-US: Steps with progress
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
带有进度的步骤。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Steps with progress.
|
|
|
|
|
2022-05-19 09:46:26 +08:00
|
|
|
```tsx
|
2020-07-27 21:40:36 +08:00
|
|
|
import { Steps } from 'antd';
|
2022-05-23 14:37:16 +08:00
|
|
|
import React from 'react';
|
2020-07-27 21:40:36 +08:00
|
|
|
|
2022-09-16 15:52:14 +08:00
|
|
|
const description = 'This is a description.';
|
2022-05-19 09:46:26 +08:00
|
|
|
const App: React.FC = () => (
|
2022-09-16 15:52:14 +08:00
|
|
|
<Steps
|
|
|
|
current={1}
|
|
|
|
percent={60}
|
|
|
|
items={[
|
|
|
|
{
|
|
|
|
title: 'Finished',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'In Progress',
|
|
|
|
subTitle: 'Left 00:00:08',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Waiting',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
/>
|
2020-07-27 21:40:36 +08:00
|
|
|
);
|
2022-05-19 09:46:26 +08:00
|
|
|
|
|
|
|
export default App;
|
2020-07-27 21:40:36 +08:00
|
|
|
```
|