Space间距

设置组件之间的间距。

何时使用#

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

  • 适合行内元素的水平间距。
  • 可以设置各种水平对齐方式。
import { NzSpaceModule } from 'ng-zorro-antd/space';

代码演示

相邻组件水平间距。

expand codeexpand code
      加载中
    
Card

Card content

Card content

Card

Card content

Card content

相邻组件垂直间距。

可以设置 width: 100% 独占一行。

expand codeexpand code
      加载中
    

间距预设大、中、小三种大小。

通过设置 nzSizelargemiddle 分别把间距设为大、中间距。若不设置 nzSize,则间距为小。

expand codeexpand code
      加载中
    
center
Block
start
Block
end
Block
baseline
Block

设置对齐模式。

expand codeexpand code
      加载中
    

自定义间距大小。

expand codeexpand code
      加载中
    

相邻组件分隔符。

expand codeexpand code
      加载中
    

API#

nz-space#

参数说明类型默认值支持全局配置
[nzSize]间距大小'small' | 'middle' | 'large' | number'small'
[nzDirection]间距方向'vertical' | 'horizontal'horizontal
[nzAlign]对齐方式'start' | 'end' | 'baseline' | 'center'-
[nzWrap]是否自动换行,仅在 horizontal 时有效booleanfalse
[nzSplit]设置分隔符TemplateRef-