Space间距

Set components spacing.

何时使用

Avoid components clinging together and set a unified space.

import { NzSpaceModule } from 'ng-zorro-antd/space';

代码演示

基本用法

相邻组件水平间距。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-space-basic',
  template: `
    <nz-space>
      <nz-space-item>
        <button nz-button nzType="primary">Button</button>
      </nz-space-item>
      <nz-space-item>
        <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76">
          <button nz-button><i nz-icon nzType="upload"></i>Click to Upload</button>
        </nz-upload>
      </nz-space-item>
      <nz-space-item>
        <button nz-button nz-popconfirm nzOkText="Yes" nzCancelText="No" nzPopconfirmTitle="Are you sure delete this task?">Confirm</button>
      </nz-space-item>
    </nz-space>
  `
})
export class NzDemoSpaceBasicComponent {}

垂直间距

相邻组件垂直间距。

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-space-vertical',
  template: `
    <nz-space nzDirection="vertical">
      <nz-space-item>
        <nz-card nzTitle="Card" style="width: 300px">
          <p>Card content</p>
          <p>Card content</p>
        </nz-card>
      </nz-space-item>
      <nz-space-item>
        <nz-card nzTitle="Card" style="width: 300px">
          <p>Card content</p>
          <p>Card content</p>
        </nz-card>
      </nz-space-item>
    </nz-space>
  `
})
export class NzDemoSpaceVerticalComponent {}

间距大小

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-space-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <label nz-radio nzValue="small">Small</label>
      <label nz-radio nzValue="middle">Middle</label>
      <label nz-radio nzValue="large">Large</label>
    </nz-radio-group>
    <nz-space [nzSize]="size">
      <nz-space-item>
        <button nz-button nzType="primary">Button</button>
      </nz-space-item>
      <nz-space-item>
        <button nz-button nzType="default">Default</button>
      </nz-space-item>
      <nz-space-item>
        <button nz-button nzType="dashed">Dashed</button>
      </nz-space-item>
      <nz-space-item>
        <a nz-button nzType="link">Link</a>
      </nz-space-item>
    </nz-space>
  `
})
export class NzDemoSpaceSizeComponent {
  size: 'small' | 'middle' | 'large' | number = 'small';
}

自定义尺寸

自定义间距大小。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-space-customize',
  template: `
    <nz-slider [(ngModel)]="size"></nz-slider>
    <nz-space [nzSize]="size">
      <nz-space-item>
        <button nz-button nzType="primary">Button</button>
      </nz-space-item>
      <nz-space-item>
        <button nz-button nzType="default">Default</button>
      </nz-space-item>
      <nz-space-item>
        <button nz-button nzType="dashed">Dashed</button>
      </nz-space-item>
      <nz-space-item>
        <a nz-button nzType="link">Link</a>
      </nz-space-item>
    </nz-space>
  `
})
export class NzDemoSpaceCustomizeComponent {
  size = 8;
}

API

nz-spacecomponent