test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-15 17:31:25 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
21a99873e6
ant-design/components/space/index.zh-CN.md
MadCcc 40e77c40d3
docs: overview dark cover (#40666) 
* docs: add dark overview

* docs: show dark cover in dark theme

* docs: update cover
2023-02-09 22:17:31 +08:00

2.6 KiB
Raw Blame History

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