Space间距

Avoid components clinging together and set a unified space.

基本用法

相邻组件水平间距。

@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% 独占一行。

间距大小

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

@Component({
  selector: 'nz-demo-space-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <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>
  `
})
  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>
      </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 {
}