• Button按钮
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • [nz-button]directive

    Button按钮

    按钮用于开始一个即时操作。

    何时使用

    标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

    代码演示

    Button按钮 - 图1

    按钮类型

    按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-basic',
    5.   template: `
    6.     <button nz-button nzType="primary">Primary</button>
    7.     <button nz-button nzType="default">Default</button>
    8.     <button nz-button nzType="dashed">Dashed</button>
    9.     <button nz-button nzType="danger">Danger</button>
    10.   `,
    11.   styles: [
    12.     `
    13.       [nz-button] {
    14.         margin-right: 8px;
    15.         margin-bottom: 12px;
    16.       }
    17.     `
    18.   ]
    19. })
    20. export class NzDemoButtonBasicComponent {}

    Button按钮 - 图2

    按钮尺寸

    按钮有大、中、小三种尺寸。

    通过设置 nzSize 为 largesmall 分别把按钮设为大、小尺寸。若不设置 nzSize，则尺寸为中。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-size',
    5.   template: `
    6.     <nz-radio-group [(ngModel)]="size">
    7.       <label nz-radio-button nzValue="large">Large</label>
    8.       <label nz-radio-button nzValue="default">Default</label>
    9.       <label nz-radio-button nzValue="small">Small</label>
    10.     </nz-radio-group>
    11.     <br />
    12.     <br />
    13.     <button nz-button [nzSize]="size" nzType="primary">Primary</button>
    14.     <button nz-button [nzSize]="size" nzType="default">Default</button>
    15.     <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
    16.     <button nz-button [nzSize]="size" nzType="danger">Danger</button>
    17.     <br />
    18.     <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon type="download"></i></button>
    19.     <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon type="download"></i>Download</button>
    20.     <button nz-button nzType="primary" [nzSize]="size"><i nz-icon type="download"></i>Download</button>
    21.     <br />
    22.     <nz-button-group [nzSize]="size">
    23.       <button nz-button nzType="primary"><i nz-icon type="left"></i>Backward</button>
    24.       <button nz-button nzType="primary">Forward<i nz-icon type="right"></i></button>
    25.     </nz-button-group>
    26.   `,
    27.   styles: [
    28.     `
    29.       [nz-button] {
    30.         margin-right: 8px;
    31.         margin-bottom: 12px;
    32.       }
    34.       nz-button-group [nz-button] {
    35.         margin-right: 0;
    36.       }
    37.     `
    38.   ]
    39. })
    40. export class NzDemoButtonSizeComponent {
    41.   size = 'large';
    42. }

    Button按钮 - 图3

    加载中状态

    添加 nzLoading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-loading',
    5.   template: `
    6.     <button nz-button nzType="primary" nzLoading><i nz-icon type="poweroff"></i>Loading</button>
    7.     <button nz-button nzType="primary" nzSize="small" nzLoading>Loading</button>
    8.     <br />
    9.     <button nz-button nzType="primary" (click)="loadOne()" [nzLoading]="isLoadingOne">Click me!</button>
    10.     <button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo">
    11.       <i nz-icon type="poweroff"></i>Click me!
    12.     </button>
    13.     <br />
    14.     <button nz-button nzLoading nzShape="circle"></button>
    15.     <button nz-button nzLoading nzType="primary" nzShape="circle"></button>
    16.   `,
    17.   styles: [
    18.     `
    19.       [nz-button] {
    20.         margin-right: 8px;
    21.         margin-bottom: 12px;
    22.       }
    23.     `
    24.   ]
    25. })
    26. export class NzDemoButtonLoadingComponent {
    27.   isLoadingOne = false;
    28.   isLoadingTwo = false;
    30.   loadOne(): void {
    31.     this.isLoadingOne = true;
    32.     setTimeout(() => {
    33.       this.isLoadingOne = false;
    34.     }, 5000);
    35.   }
    37.   loadTwo(): void {
    38.     this.isLoadingTwo = true;
    39.     setTimeout(() => {
    40.       this.isLoadingTwo = false;
    41.     }, 5000);
    42.   }
    43. }

    Button按钮 - 图4

    按钮组合

    可以将多个 nz-button 放入 nz-button-group 的容器中。

    通过设置 nzSize 为 largesmall 分别把按钮组合设为大、小尺寸。若不设置 nzSize，则尺寸为中。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-button-group',
    5.   template: `
    6.     <h4>Basic</h4>
    7.     <nz-button-group>
    8.       <button nz-button>Cancel</button>
    9.       <button nz-button nzType="primary">OK</button>
    10.     </nz-button-group>
    11.     <nz-button-group>
    12.       <button nz-button nzType="default" disabled>L</button>
    13.       <button nz-button nzType="default" disabled>M</button>
    14.       <button nz-button nzType="default" disabled>R</button>
    15.     </nz-button-group>
    16.     <nz-button-group>
    17.       <button nz-button nzType="primary" disabled>L</button>
    18.       <button nz-button nzType="default" disabled>M</button>
    19.       <button nz-button nzType="default">M</button>
    20.       <button nz-button nzType="dashed" disabled>R</button>
    21.     </nz-button-group>
    22.     <h4>With Icon</h4>
    23.     <nz-button-group>
    24.       <button nz-button nzType="primary"><i nz-icon type="left"></i> Go back</button>
    25.       <button nz-button nzType="primary">Go forward<i nz-icon type="right"></i></button>
    26.     </nz-button-group>
    27.     <nz-button-group>
    28.       <button nz-button nzType="primary"><i nz-icon type="cloud"></i></button>
    29.       <button nz-button nzType="primary"><i nz-icon type="cloud-download"></i></button>
    30.     </nz-button-group>
    31.   `,
    32.   styles: [
    33.     `
    34.       h4 {
    35.         margin: 16px 0;
    36.         font-size: 14px;
    37.         line-height: 1;
    38.         font-weight: normal;
    39.       }
    41.       h4:first-child {
    42.         margin-top: 0;
    43.       }
    45.       [nz-button] {
    46.         margin-bottom: 12px;
    47.       }
    49.       nz-button-group {
    50.         margin-bottom: 8px;
    51.         margin-right: 8px;
    52.       }
    53.     `
    54.   ]
    55. })
    56. export class NzDemoButtonButtonGroupComponent {}

    Button按钮 - 图5

    Block 按钮

    nzBlock 属性将使按钮适合其父宽度。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-block',
    5.   template: `
    6.     <button nz-button nzType="primary" nzBlock>Primary</button>
    7.     <button nz-button nzType="default" nzBlock>Default</button>
    8.     <button nz-button nzType="dashed" nzBlock>Dashed</button>
    9.     <button nz-button nzType="danger" nzBlock>Danger</button>
    10.   `,
    11.   styles: [
    12.     `
    13.       [nz-button] {
    14.         margin-bottom: 12px;
    15.       }
    16.     `
    17.   ]
    18. })
    19. export class NzDemoButtonBlockComponent {}

    Button按钮 - 图6

    图标按钮

    当需要在 nz-button 内嵌入图标时，可以直接在 nz-button 内嵌入对应的 icon。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-icon',
    5.   template: `
    6.     <button nz-button nzType="primary" nzShape="circle"><i nz-icon type="search"></i></button>
    7.     <button nz-button nzType="primary"><i nz-icon type="search"></i>Search</button>
    8.     <button nz-button nzType="default" nzShape="circle"><i nz-icon type="search"></i></button>
    9.     <button nz-button nzType="default"><i nz-icon type="search"></i>Search</button>
    10.     <br />
    11.     <button nz-button nzType="default" nzShape="circle"><i nz-icon type="search"></i></button>
    12.     <button nz-button nzType="default"><i nz-icon type="search"></i>Search</button>
    13.     <button nz-button nzType="dashed" nzShape="circle"><i nz-icon type="search"></i></button>
    14.     <button nz-button nzType="dashed"><i nz-icon type="search"></i>Search</button>
    15.   `,
    16.   styles: [
    17.     `
    18.       [nz-button] {
    19.         margin-right: 8px;
    20.         margin-bottom: 12px;
    21.       }
    22.     `
    23.   ]
    24. })
    25. export class NzDemoButtonIconComponent {}

    Button按钮 - 图7

    不可用状态

    添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-disabled',
    5.   template: `
    6.     <button nz-button nzType="primary">Primary</button>
    7.     <button nz-button nzType="primary" disabled>Primary(disabled)</button>
    8.     <br />
    9.     <button nz-button nzType="default">Default</button>
    10.     <button nz-button nzType="default" disabled>Default(disabled)</button>
    11.     <br />
    12.     <button nz-button nzType="dashed">Dashed</button>
    13.     <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
    14.     <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
    15.       <button nz-button nzGhost>Ghost</button>
    16.       <button nz-button nzGhost disabled>Ghost(disabled)</button>
    17.     </div>
    18.   `,
    19.   styles: [
    20.     `
    21.       [nz-button] {
    22.         margin-right: 8px;
    23.         margin-bottom: 12px;
    24.       }
    25.     `
    26.   ]
    27. })
    28. export class NzDemoButtonDisabledComponent {}

    Button按钮 - 图8

    多个按钮组合

    按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 nz-dropdown 中组合使用。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-multiple',
    5.   template: `
    6.     <button nz-button nzType="primary">primary</button>
    7.     <button nz-button nzType="default">secondary</button>
    8.     <nz-dropdown>
    9.       <button nz-button nz-dropdown>Actions<i nz-icon type="down"></i></button>
    10.       <ul nz-menu>
    11.         <li nz-menu-item>
    12.           <a>1st item</a>
    13.         </li>
    14.         <li nz-menu-item>
    15.           <a>2nd item</a>
    16.         </li>
    17.         <li nz-menu-item>
    18.           <a>3rd item</a>
    19.         </li>
    20.       </ul>
    21.     </nz-dropdown>
    22.   `,
    23.   styles: [
    24.     `
    25.       [nz-button] {
    26.         margin-right: 8px;
    27.         margin-bottom: 12px;
    28.       }
    29.     `
    30.   ]
    31. })
    32. export class NzDemoButtonMultipleComponent {}

    Button按钮 - 图9

    幽灵按钮

    添加 nzGhost 属性后，幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-button-ghost',
    5.   template: `
    6.     <div style="background: rgb(190, 200, 200);padding: 26px 16px 16px;">
    7.       <button nz-button nzType="primary" nzGhost>Primary</button>
    8.       <button nz-button nzType="default" nzGhost>Default</button>
    9.       <button nz-button nzType="dashed" nzGhost>Dashed</button>
    10.       <button nz-button nzType="danger" nzGhost>Danger</button>
    11.     </div>
    12.   `,
    13.   styles: [
    14.     `
    15.       [nz-button] {
    16.         margin-right: 8px;
    17.         margin-bottom: 12px;
    18.       }
    19.     `
    20.   ]
    21. })
    22. export class NzDemoButtonGhostComponent {}

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzButtonModule } from 'ng-zorro-antd';

    [nz-button]directive

    通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：nzType -> nzShape -> nzSize -> nzLoading -> disabled

    按钮的属性说明如下：

    属性说明类型默认值
    [nzGhost]幽灵属性，使按钮背景透明booleanfalse
    [nzLoading]设置按钮载入状态booleanfalse
    [nzShape]设置按钮形状，可选值为 circleround 或者不设'circle'｜'round'-
    [nzSize]设置按钮大小，可选值为 smalllarge 或者不设'large'｜'small'｜'default''default'
    [nzType]设置按钮类型，可选值为 primarydasheddanger 或者不设'primary'｜'dashed'｜'danger'｜'default''default'
    [nzBlock]将按钮宽度调整为其父宽度的选项booleanfalse