You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.3 KiB

category group title cover
Components Layout Space https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/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