Space

何时使用 {#when-to-use}

避免组件紧贴在一起，拉开统一的空间。

• 适合行内元素的水平间距。
• 可以设置各种水平对齐方式。
• 需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 [email protected] 版本开始提供该组件）。

与 Flex 组件的区别 {#difference-with-flex-component}

• Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
• Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。

代码演示 {#examples}

<!-- prettier-ignore -->

<code src="./demo/base.tsx">基本用法</code> <code src="./demo/vertical.tsx">垂直间距</code> <code src="./demo/size.tsx">间距大小</code> <code src="./demo/align.tsx">对齐</code> <code src="./demo/wrap.tsx">自动换行</code> <code src="./demo/separator.tsx">分隔符</code> <code src="./demo/compact.tsx">紧凑布局组合</code> <code src="./demo/compact-buttons.tsx">Button 紧凑布局</code> <code src="./demo/compact-button-vertical.tsx">垂直方向紧凑布局</code> <code src="./demo/compact-debug.tsx" debug>调试 Input 前置/后置标签</code> <code src="./demo/compact-nested.tsx" debug>紧凑布局嵌套</code> <code src="./demo/debug.tsx" debug>多样的 Child</code> <code src="./demo/gap-in-line.tsx" debug>Flex gap 样式</code> <code src="./demo/style-class.tsx" version="6.0.0">自定义语义结构的样式和类</code>

API

通用属性参考：通用属性

Space

参数	说明	类型	默认值	版本
align	对齐方式	start | end |center |baseline	-	4.2.0
classNames	用于自定义组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> | (info: { props: SpaceProps })=> Record<SemanticDOM, string>	-
direction	间距方向	vertical | horizontal	horizontal	4.1.0
orientation	间距方向	vertical | horizontal	horizontal
size	间距大小	Size | Size[]	small	4.1.0 | Array: 4.9.0
split	设置分隔符, 请使用 separator 替换	ReactNode	-	4.7.0
separator	设置分隔符	ReactNode	-	-
styles	用于自定义组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM, CSSProperties> | (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>	-
vertical	是否垂直，和 orientation 同时配置以 orientation 优先	boolean	false	-
wrap	是否自动换行，仅在 horizontal 时有效	boolean	false	4.9.0

Size

'small' | 'medium' | 'large' | number

Space.Compact

需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact，支持的组件有：

• Button
• AutoComplete
• Cascader
• DatePicker
• Input/Input.Search
• InputNumber
• Select
• TimePicker
• TreeSelect

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false	4.24.0
direction	指定排列方向	vertical | horizontal	horizontal	4.24.0
orientation	指定排列方向	vertical | horizontal	horizontal
size	子组件大小	large | medium | small	medium	4.24.0
vertical	是否垂直，和 orientation 同时配置以 orientation 优先	boolean	false	-

Space.Addon

自 [email protected] 版本开始提供该组件。

用于在紧凑布局中创建自定义单元格。

参数	说明	类型	默认值	版本
children	自定义内容	ReactNode	-	5.29.0

Semantic DOM

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

主题变量（Design Token）{#design-token}

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