间距是为了设置组件之间的距离应运而生的。
属性
| Antd | Element | 说明 |
|---|---|---|
| align | alignment | 对齐方式 |
| classNames | class | 语义化 className |
| direction | direction | 间距方向 |
| — | fill | 子元素是否填充父容器 |
| — | fill-ratio | 填充父容器的比例 |
| — | prefix-cls | 给 space-items 的类名前缀 |
| size | size | 间隔大小 |
| split | spacer | 设置分隔符 |
| styles | style | 语义化 style |
| wrap | wrap | 是否自动换行，仅在 horizontal 时有效 |
Ant Design
需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：
- Button
- AutoComplete
- Cascader
- DatePicker
- Input/Input.Search
- InputNumber
- Select
- TimePicker
- TreeSelect
这个组件在 Element Plus 中并不存在。
Element Plus
fill、fill-ratio 与 prefix-cls 这三个属性是 Element Plus 独有的，在实际项目中应用的并不多，针对 fill 这种填充布局一般是自定义 css 来实现。
小结
Ant Design 把表单组件之单紧凑的布局抽像成 Space.Compact，这使人眼前一亮，不过如果在表单里有组合组件是否会更合适呢？另外这个 Compact 的思想是 Ant Design 原创的吗？
参考链接：
发表回复