mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-12 15:19:58 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
7104513a84
ant-design/components/space/index.en-US.md
二货爱吃白萝卜 7104513a84
docs: Support semantic preview (#47332) 
* docs: init

* docs: semantic block

* docs: part of demo

* docs: modal

* docs: slider

* docs: space

* docs: all sementic

* docs: clean up

* chore: fix lint

* chore: clean up

* chore: update script

* test: fix test case

* test: update testcase
2024-02-05 11:45:42 +08:00

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

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