2022-08-12 17:36:47 +08:00
|
|
|
---
|
|
|
|
order: 14
|
|
|
|
title:
|
|
|
|
zh-CN: 标签放置位置
|
|
|
|
en-US: Label Placement
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
修改标签放置位置为 `vertical`。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Set labelPlacement to `vertical`.
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
import { Steps } from 'antd';
|
|
|
|
import React from 'react';
|
|
|
|
|
2022-09-16 15:52:14 +08:00
|
|
|
const description = 'This is a description.';
|
|
|
|
const items = [
|
|
|
|
{
|
|
|
|
title: 'Finished',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'In Progress',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Waiting',
|
|
|
|
description,
|
|
|
|
},
|
|
|
|
];
|
2022-08-12 17:36:47 +08:00
|
|
|
const App: React.FC = () => (
|
|
|
|
<>
|
2022-09-16 15:52:14 +08:00
|
|
|
<Steps current={1} labelPlacement="vertical" items={items} />
|
2022-08-12 17:36:47 +08:00
|
|
|
<br />
|
2022-09-16 15:52:14 +08:00
|
|
|
<Steps current={1} percent={60} labelPlacement="vertical" items={items} />
|
2022-08-12 17:36:47 +08:00
|
|
|
<br />
|
2022-09-16 15:52:14 +08:00
|
|
|
<Steps current={1} size="small" labelPlacement="vertical" items={items} />
|
2022-08-12 17:36:47 +08:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
export default App;
|
|
|
|
```
|