Space

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 [email protected] 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

<!-- prettier-ignore -->

<code src="./demo/base.tsx">Basic Usage</code> <code src="./demo/vertical.tsx">Vertical Space</code> <code src="./demo/size.tsx">Space Size</code> <code src="./demo/align.tsx">Align</code> <code src="./demo/wrap.tsx">Wrap</code> <code src="./demo/separator.tsx">separator</code> <code src="./demo/compact.tsx">Compact Mode for form component</code> <code src="./demo/compact-buttons.tsx">Button Compact Mode</code> <code src="./demo/compact-button-vertical.tsx">Vertical Compact Mode</code> <code src="./demo/compact-debug.tsx" debug>Input addon debug</code> <code src="./demo/compact-nested.tsx" debug>Nested Space Compact</code> <code src="./demo/debug.tsx" debug>Diverse Child</code> <code src="./demo/gap-in-line.tsx" debug>Flex gap style</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
align	Align items	start | end |center |baseline	-	4.2.0
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> | (info: { props: SpaceProps })=> Record<SemanticDOM, string>	-
direction	The space direction	vertical | horizontal	horizontal	4.1.0
orientation	The space direction	vertical | horizontal	horizontal
size	The space size	Size | Size[]	small	4.1.0 | Array: 4.9.0
split	Set split, please use separator instead	ReactNode	-	4.7.0
separator	Set separator	ReactNode	-	-
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> | (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>	-
vertical	Orientation, Simultaneously configure with orientation and prioritize orientation	boolean	false	-
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
orientation	Set direction of layout	vertical | horizontal	horizontal
vertical	Orientation, Simultaneously configure with orientation and prioritize orientation	boolean	false	-
size	Set child component size	large | middle | small	middle	4.24.0

Space.Addon

This component is available since [email protected].

Used to create custom cells in compact layouts.

Property	Description	Type	Default	Version
children	Custom content	ReactNode	-	5.29.0

Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

Design Token

<ComponentTokenTable component="Space"></ComponentTokenTable>