Button按钮

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

何时使用

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

在 Ant Design 中,我们有四种按钮。

  • 主按钮:用于主行动点,一个操作区域只能有一个主按钮。
  • 默认按钮:用于没有主次之分的一组行动点。
  • 虚线按钮:常用于添加操作。
  • 链接按钮:用于次要或外链的行动点。

以及四种状态属性与上面配合使用。

  • 危险:删除/移动/修改权限等危险操作,一般需要二次确认。
  • 幽灵:用于背景色比较复杂的地方,常用在首页/产品页等展示场景。
  • 禁用:行动点不可用的时候,一般需要文案解释。
  • 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。
  1. import { NzButtonModule } from 'ng-zorro-antd/button';

代码演示Button按钮 - 图2

Button按钮 - 图3

按钮类型

按钮有四种类型:主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

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

Button按钮 - 图4

按钮尺寸

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

通过设置 nzSizelarge``small 分别把按钮设为大、小尺寸。若不设置 nzSize,则尺寸为中。

  1. import { Component } from '@angular/core';
  2. import { NzButtonSize } from 'ng-zorro-antd/button';
  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. <a nz-button [nzSize]="size" nzType="link">Link</a>
  17. <br />
  18. <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i></button>
  19. <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon nzType="download"></i></button>
  20. <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon nzType="download"></i></button>
  21. <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon nzType="download"></i>Download</button>
  22. <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i>Download</button>
  23. <br />
  24. <nz-button-group [nzSize]="size">
  25. <button nz-button nzType="primary"><i nz-icon nzType="left"></i>Backward</button>
  26. <button nz-button nzType="primary">Forward<i nz-icon nzType="right"></i></button>
  27. </nz-button-group>
  28. `,
  29. styles: [
  30. `
  31. [nz-button] {
  32. margin-right: 8px;
  33. margin-bottom: 12px;
  34. }
  35. nz-button-group [nz-button] {
  36. margin-right: 0;
  37. }
  38. `
  39. ]
  40. })
  41. export class NzDemoButtonSizeComponent {
  42. size: NzButtonSize = 'large';
  43. }

Button按钮 - 图5

加载中状态

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

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

Button按钮 - 图6

按钮组合

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

通过设置 nzSizelarge``small 分别把按钮组合设为大、小尺寸。若不设置 nzSize,则尺寸为中。

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

Button按钮 - 图7

Block 按钮

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

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

Button按钮 - 图8

图标按钮

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-button-icon',
  4. template: `
  5. <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
  6. <button nz-button nzType="primary" nzShape="circle">A</button>
  7. <button nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
  8. <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
  9. <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
  10. <br />
  11. <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
  12. <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
  13. <button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
  14. <button nz-button nzType="dashed"><i nz-icon nzType="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按钮 - 图9

不可用状态

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

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

Button按钮 - 图10

多个按钮组合

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

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

Button按钮 - 图11

幽灵按钮

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

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

Button按钮 - 图12

危险按钮

使用 nzDanger 将按钮标识为危险状态。

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

API

[nz-button]directive

注意:nz-button 是一个 Directive,除以下表格之外还支持例如 disabled 等原生 button 的所有属性

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

按钮的属性说明如下:

属性说明类型默认值支持全局配置
[nzGhost]幽灵属性,使按钮背景透明booleanfalse
[nzLoading]设置按钮载入状态booleanfalse
[nzShape]设置按钮形状,可选值为 circleround 或者不设‘circle’|’round’-
[nzSize]设置按钮大小,可选值为 smalllarge 或者不设‘large’|’small’|’default’‘default’
[nzType]设置按钮类型,可选值为 primarydashedlink 或者不设‘primary’|’dashed’|’link’-
[nzBlock]将按钮宽度调整为其父宽度的选项booleanfalse
[nzDanger]设置危险按钮booleanfalse

nz-button-groupcomponent

属性说明类型默认值支持全局配置
[nzSize]设置按钮大小,可选值为 smalllarge 或者不设‘large’|’small’|’default’‘default’-