Space间距

Set components spacing.

何时使用

Avoid components clinging together and set a unified space.

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

代码演示Space间距 - 图2

Space间距 - 图3

基本用法

相邻组件水平间距。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-space-basic',
  4. template: `
  5. <nz-space>
  6. <nz-space-item>
  7. <button nz-button nzType="primary">Button</button>
  8. </nz-space-item>
  9. <nz-space-item>
  10. <nz-upload nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76">
  11. <button nz-button><i nz-icon nzType="upload"></i>Click to Upload</button>
  12. </nz-upload>
  13. </nz-space-item>
  14. <nz-space-item>
  15. <button nz-button nz-popconfirm nzOkText="Yes" nzCancelText="No" nzPopconfirmTitle="Are you sure delete this task?">Confirm</button>
  16. </nz-space-item>
  17. </nz-space>
  18. `
  19. })
  20. export class NzDemoSpaceBasicComponent {}

Space间距 - 图4

垂直间距

相邻组件垂直间距。

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-space-vertical',
  4. template: `
  5. <nz-space nzDirection="vertical">
  6. <nz-space-item>
  7. <nz-card nzTitle="Card" style="width: 300px">
  8. <p>Card content</p>
  9. <p>Card content</p>
  10. </nz-card>
  11. </nz-space-item>
  12. <nz-space-item>
  13. <nz-card nzTitle="Card" style="width: 300px">
  14. <p>Card content</p>
  15. <p>Card content</p>
  16. </nz-card>
  17. </nz-space-item>
  18. </nz-space>
  19. `
  20. })
  21. export class NzDemoSpaceVerticalComponent {}

Space间距 - 图5

间距大小

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

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-space-size',
  4. template: `
  5. <nz-radio-group [(ngModel)]="size">
  6. <label nz-radio nzValue="small">Small</label>
  7. <label nz-radio nzValue="middle">Middle</label>
  8. <label nz-radio nzValue="large">Large</label>
  9. </nz-radio-group>
  10. <nz-space [nzSize]="size">
  11. <nz-space-item>
  12. <button nz-button nzType="primary">Button</button>
  13. </nz-space-item>
  14. <nz-space-item>
  15. <button nz-button nzType="default">Default</button>
  16. </nz-space-item>
  17. <nz-space-item>
  18. <button nz-button nzType="dashed">Dashed</button>
  19. </nz-space-item>
  20. <nz-space-item>
  21. <a nz-button nzType="link">Link</a>
  22. </nz-space-item>
  23. </nz-space>
  24. `
  25. })
  26. export class NzDemoSpaceSizeComponent {
  27. size: 'small' | 'middle' | 'large' | number = 'small';
  28. }

Space间距 - 图6

自定义尺寸

自定义间距大小。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-space-customize',
  4. template: `
  5. <nz-slider [(ngModel)]="size"></nz-slider>
  6. <nz-space [nzSize]="size">
  7. <nz-space-item>
  8. <button nz-button nzType="primary">Button</button>
  9. </nz-space-item>
  10. <nz-space-item>
  11. <button nz-button nzType="default">Default</button>
  12. </nz-space-item>
  13. <nz-space-item>
  14. <button nz-button nzType="dashed">Dashed</button>
  15. </nz-space-item>
  16. <nz-space-item>
  17. <a nz-button nzType="link">Link</a>
  18. </nz-space-item>
  19. </nz-space>
  20. `
  21. })
  22. export class NzDemoSpaceCustomizeComponent {
  23. size = 8;
  24. }

API

nz-spacecomponent

参数说明类型默认值支持全局配置
[nzSize]间距大小small | middle | large | numbersmall
[nzDirection]间距方向vertical | horizontalhorizontal