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-align',
  template: `
    <div class="space-align-container">
      <div nz-space nzAlign="center" class="space-align-block">
        <nz-space-item>center</nz-space-item>
        <nz-space-item>
          <button nz-button nzType="primary">Button</button>
        </nz-space-item>
        <span nz-space-item class="mock-block">Block</span>
      </div>
      <div nz-space nzAlign="start" class="space-align-block">
        <nz-space-item>start</nz-space-item>
        <nz-space-item>
          <button nz-button nzType="primary">Button</button>
        </nz-space-item>
        <span nz-space-item class="mock-block">Block</span>
      </div>
      <div nz-space nzAlign="end" class="space-align-block">
        <nz-space-item>end</nz-space-item>
        <nz-space-item>
          <button nz-button nzType="primary">Button</button>
        </nz-space-item>
        <span nz-space-item class="mock-block">Block</span>
      </div>
      <div nz-space nzAlign="baseline" class="space-align-block">
        <nz-space-item>baseline</nz-space-item>
        <nz-space-item>
          <button nz-button nzType="primary">Button</button>
        </nz-space-item>
        <span nz-space-item class="mock-block">Block</span>
      </div>
    </div>
  `,
  styles: [
    `
      .space-align-container {
        display: flex;
        align-item: flex-start;
        flex-wrap: wrap;
      }
      .space-align-block {
        margin: 8px 4px;
        border: 1px solid #40a9ff;
        padding: 4px;
        flex: none;
      }
      .space-align-block .mock-block {
        display: inline-block;
        padding: 32px 8px 16px;
        background: rgba(150, 150, 150, 0.2);
      }
    `
  ]
})
export class NzDemoSpaceAlignComponent {}

自定义尺寸

自定义间距大小。

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