47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
---
|
||
category: Components
|
||
type: Layout
|
||
title: Space
|
||
cols: 1
|
||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original
|
||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
|
||
---
|
||
|
||
Set components spacing.
|
||
|
||
## When To Use
|
||
|
||
- Avoid components clinging together and set a unified space.
|
||
- Use Space.Compact when child form components are compactly connected and the border is collapsed (After version `ant-design-vue@4.0.0` Supported).
|
||
|
||
## API
|
||
|
||
### Space
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| --- | --- | --- | --- | --- |
|
||
| align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 1.6.5 |
|
||
| direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 1.6.5 |
|
||
| size | The space size | `small` \| `middle` \| `large` \| `number` | `small` | 1.6.5 |
|
||
| split | Set split | VueNode \| v-slot | - | 2.2.0 |
|
||
| wrap | Auto wrap line, when `horizontal` effective | boolean | false | 2.2.0 |
|
||
|
||
### Space.Compact
|
||
|
||
Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are：
|
||
|
||
- Button
|
||
- AutoComplete
|
||
- Cascader
|
||
- DatePicker
|
||
- Input/Input.Search
|
||
- Select
|
||
- TimePicker
|
||
- TreeSelect
|
||
|
||
| Property | Description | Type | Default | Version |
|
||
| --- | --- | --- | --- | --- |
|
||
| block | Option to fit width to its parent\'s width | boolean | false | 4.0.0 |
|
||
| direction | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | 4.0.0 |
|
||
| size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.0.0 |
|