Space间距
Space
间距
设置组件之间的间距。
使用import { Space } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
避免组件紧贴在一起，拉开统一的空间。
antd@4.24.0 版本开始提供该组件）。相邻组件水平间距。
Card content
Card content
Card content
Card content
Card content
Card content
相邻组件垂直间距。
使用 size 设置元素之间的间距，预设了 small、middle、large 三种尺寸，也可以自定义间距，若不设置 size，则默认为 small。
设置对齐模式。
自动换行。
相邻组件分隔符。
使用 Space.Compact 让表单组件之间紧凑连接且合并边框。
Button 组件紧凑排列的示例。
垂直方向的紧凑布局，目前仅支持 Button 组合。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| align | 对齐方式 | start | end |center |baseline | - | 4.2.0 |
| classNames | 语义化 className | Record<SemanticDOM, string> | - | |
| direction | 间距方向 | vertical | horizontal | horizontal | 4.1.0 |
| size | 间距大小 | Size | Size[] | small | 4.1.0 | Array: 4.9.0 |
| split | 设置分隔符 | ReactNode | - | 4.7.0 |
| styles | 语义化 style | Record<SemanticDOM, CSSProperties> | - | |
| wrap | 是否自动换行，仅在 horizontal 时有效 | boolean | false | 4.9.0 |
'small' | 'middle' | 'large' | number
自 antd@4.24.0 版本开始提供该组件。
需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| block | 将宽度调整为父元素宽度的选项 | boolean | false | 4.24.0 |
| direction | 指定排列方向 | vertical | horizontal | horizontal | 4.24.0 |
| size | 子组件大小 | large | middle | small | middle | 4.24.0 |
