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.8 KiB

category group subtitle title cover coverDark
Components 布局 间距 Space https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original

设置组件之间的间距。

何时使用

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

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

代码演示

基本用法 垂直间距 间距大小 对齐 自定义尺寸 自动换行 分隔符 紧凑布局组合 Button 紧凑布局 垂直方向紧凑布局 调试 Input 前置/后置标签 紧凑布局嵌套 多样的 Child Flex gap 样式

API

Space

参数 说明 类型 默认值 版本
align 对齐方式 start | end |center |baseline - 4.2.0
direction 间距方向 vertical | horizontal horizontal 4.1.0
size 间距大小 Size | Size[] small 4.1.0 | Array: 4.9.0
split 设置拆分 ReactNode - 4.7.0
wrap 是否自动换行,仅在 horizontal 时有效 boolean false 4.9.0

Size

'small' | 'middle' | 'large' | number

Space.Compact

自 antd@4.24.0 版本开始提供该组件。

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

  • Button
  • AutoComplete
  • Cascader
  • DatePicker
  • Input/Input.Search
  • Select
  • TimePicker
  • TreeSelect
参数 说明 类型 默认值 版本
block 将宽度调整为父元素宽度的选项 boolean false 4.24.0
direction 指定排列方向 vertical | horizontal horizontal 4.24.0
size 子组件大小 large | middle | small middle 4.24.0

stylesclassNames 属性

名称 说明 版本
item 设置 Space 包裹的子组件 5.6.0

Design Token