mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity
master
ant-design/components/space/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

3.2 KiB
Raw Permalink Blame History

category group title description cover coverDark
Components Layout Space Set components spacing. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original

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).

Difference with Flex component

  • Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
  • Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

Examples

Basic Usage Vertical Space Space Size Align 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

Common props ref：Common props

Property Description Type Default Version
align Align items start | end |center |baseline - 4.2.0
classNames Semantic className Record<SemanticDOM, string> -
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
styles Semantic style Record<SemanticDOM, CSSProperties> -
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
  • InputNumber
  • 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

Semantic DOM

Design Token