test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity
e027cbec1c
ant-design/components/space/index.zh-CN.md
afc163 e027cbec1c
docs: format all markdown (#38629) 
* chore: add prettier-ignore in markdown demo

* docs: format markdown api table

* docs: format markdown api table
2022-11-17 17:31:26 +08:00

2.4 KiB
Raw Blame History

category group subtitle title cover demo
Components 布局 间距 Space https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
cols
2

设置组件之间的间距。

何时使用

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

  • 适合行内元素的水平间距。
  • 可以设置各种水平对齐方式。
  • 需要表单组件之间紧凑连接且合并边框时，使用 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