mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-13 23:59:12 +08:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity
9d52c5810e
ant-design/components/space/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.5 KiB
Raw Blame History

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

Design Token