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
      加载中
Link
间距大小

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

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

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

设置对齐模式。

expand codeexpand code
      加载中
Link
自定义尺寸

自定义间距大小。

expand codeexpand code
      加载中
Link
Link
Link
分隔符

相邻组件分隔符。

expand codeexpand code
      加载中




Zhejianggggg

Zhejianggggg

Option1




Option1-1 Option1-2
Between
Sign Up
请选择

leaf 1-0-0

Http://.com$
$
紧凑布局组合

使用 <nz-space-compact> 让表单组件之间紧凑连接且合并边框。

expand codeexpand code
      加载中


Button 紧凑布局

Button 组件紧凑排列的示例。

expand codeexpand code
      加载中
垂直方向紧凑布局

垂直方向的紧凑布局，目前仅支持 Button 组合。

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 | string-

nz-space-compact:standalone#

需要表单组件之间紧凑连接且合并边框时，使用 <nz-space-compact>。支持的组件有：

  • Button
  • Cascader
  • DatePicker
  • Input
  • Select
  • TimePicker
  • TreeSelect
参数说明类型默认值支持全局配置
[nzBlock]将宽度调整为父元素宽度的选项booleanfalse
[nzDirection]指定排列方向'vertical' | 'horizontal''horizontal'
[nzSize]子组件大小'large' | 'default' | 'small''default'