mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
cef58664e8
* ✨feat: add token * 📝doc: update lint * 📝doc: update doc
2.5 KiB
2.5 KiB
category | group | title | cover | coverDark |
---|---|---|---|---|
Components | Layout | Space | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original | 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
antd@4.24.0
Supported).
Examples
Basic Usage
Vertical Space
Space Size
Align
Customize Size
Wrap
Split
Compact Mode for form component
Button Compact Mode
Vertical Compact Mode
Input addon debug
Nested Space Compact
Diverse Child
Flex gap style
API
Property | Description | Type | Default | Version |
---|---|---|---|---|
align | Align items | start | end |center |baseline |
- | 4.2.0 |
direction | The space direction | vertical | horizontal |
horizontal |
4.1.0 |
size | The space size | Size | Size[] | small |
4.1.0 | Array: 4.9.0 |
split | Set split | ReactNode | - | 4.7.0 |
wrap | Auto wrap line, when horizontal effective |
boolean | false | 4.9.0 |
Size
'small' | 'middle' | 'large' | number
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.24.0 |
direction | Set direction of layout | vertical | horizontal |
horizontal |
4.24.0 |
size | Set child component size | large | middle | small |
middle |
4.24.0 |