NG-ZORROSpace间距
使用 |
文档 |
何时使用#
避免组件紧贴在一起，拉开统一的空间。
- 适合行内元素的水平间距。
- 可以设置各种水平对齐方式。
- 需要表单组件之间紧凑连接且合并边框时，使用
<nz-space-compact>。
与 Flex 组件的区别：
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
代码演示
相邻组件水平间距。
加载中
Card
Card content
Card content
Card
Card content
Card content
相邻组件垂直间距。
可以设置 width: 100% 独占一行。
加载中
间距预设大、中、小三种大小。
通过设置 nzSize 为 largemiddle 分别把间距设为大、中间距。若不设置 nzSize，则间距为小。
加载中
center
Block
start
Block
end
Block
baseline
Block
设置对齐模式。
加载中
自定义间距大小。
加载中
相邻组件分隔符。
加载中
Zhejianggggg
$
使用 <nz-space-compact> 让表单组件之间紧凑连接且合并边框。
加载中
Button 组件紧凑排列的示例。
加载中
垂直方向的紧凑布局，目前仅支持 Button 组合。
加载中
API#
nz-space#
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
|---|---|---|---|---|
[nzSize] | 间距大小 | 'small' | 'middle' | 'large' | number | 'small' | ✅ |
[nzDirection] | 间距方向 | 'vertical' | 'horizontal' | horizontal | |
[nzAlign] | 对齐方式 | 'start' | 'end' | 'baseline' | 'center' | - | |
[nzWrap] | 是否自动换行，仅在 horizontal 时有效 | boolean | false | |
[nzSplit] | 设置分隔符 | TemplateRef | string | - |
nz-space-compact#
需要表单组件之间紧凑连接且合并边框时，使用 <nz-space-compact>。支持的组件有：
- Button
- Cascader
- DatePicker
- Input
- Select
- TimePicker
- TreeSelect
| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 |
|---|---|---|---|---|
[nzBlock] | 将宽度调整为父元素宽度的选项 | boolean | false | |
[nzDirection] | 指定排列方向 | 'vertical' | 'horizontal' | 'horizontal' | |
[nzSize] | 子组件大小 | 'large' | 'default' | 'small' | 'default' |