mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 21:28:09 +08:00
6e016b88c3
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
3.3 KiB
3.3 KiB
| category | group | title | subtitle | description | 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版本开始提供该组件）。
与 Flex 组件的区别
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
代码演示
基本用法
垂直间距
间距大小
对齐
自动换行
分隔符
紧凑布局组合
Button 紧凑布局
垂直方向紧凑布局
调试 Input 前置/后置标签
紧凑布局嵌套
多样的 Child
Flex gap 样式
API
通用属性参考：通用属性
Space
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 |
Size
'small' | 'middle' | 'large' | number
Space.Compact
自 antd@4.24.0 版本开始提供该组件。
需要表单组件之间紧凑连接且合并边框时，使用 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 |
| size | 子组件大小 | large | middle | small |
middle |
4.24.0 |