Button按钮

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

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

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

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

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

    按钮类型

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

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

    Button按钮 - 图2

    按钮尺寸

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

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

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

    加载中状态

    Button按钮 - 图4

    按钮组合

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

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

    1. import { Component } from '@angular/core';
    3. @Component({
    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>
    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.       }
    40.       h4:first-child {
    41.         margin-top: 0;
    42.       }
    44.       [nz-button] {
    45.         margin-bottom: 12px;
    46.       }
    48.       nz-button-group {
    49.         margin-bottom: 8px;
    50.         margin-right: 8px;
    51.       }
    52.     `
    53.   ]
    54. })
    55. export class NzDemoButtonButtonGroupComponent {}

    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="text" nzBlock>Text</button>
    10.     <a nz-button nzType="link" nzBlock>Link</a>
    11.   `,
    12.   styles: [
    13.     `
    14.       [nz-button] {
    15.         margin-bottom: 12px;
    16.       }
    17.     `
    18.   ]
    19. })
    20. export class NzDemoButtonBlockComponent {}

    Button按钮 - 图6

    图标按钮

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

    不可用状态

    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" disabled>Dashed(disabled)</button>
    13.     <br />
    14.     <a nz-button nzType="text">Text</a>
    15.     <a nz-button nzType="text" disabled>Text(disabled)</a>
    16.     <br />
    17.     <a nz-button nzType="link">Link</a>
    18.     <a nz-button nzType="link" disabled>Link(disabled)</a>
    19.     <br />
    20.     <a nz-button nzType="text" nzDanger>Danger Text</a>
    21.     <a nz-button nzType="text" disabled nzDanger>Danger Text(disabled)</a>
    22.     <br />
    23.     <a nz-button nzType="link" nzDanger>Danger Link</a>
    24.     <a nz-button nzType="link" disabled nzDanger>Danger Link(disabled)</a>
    25.     <br />
    26.     <button nz-button nzType="default" nzDanger>Danger Default</button>
    27.     <button nz-button nzType="default" disabled nzDanger>Danger Default(disabled)</button>
    28.     <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
    29.       <button nz-button nzGhost>Ghost</button>
    30.       <button nz-button nzGhost disabled>Ghost(disabled)</button>
    31.     </div>
    32.   `,
    33.   styles: [
    34.     `
    35.       [nz-button] {
    36.         margin-right: 8px;
    37.         margin-bottom: 12px;
    38.       }
    39.     `
    41. })
    42. 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.     <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
    9.     <nz-dropdown-menu #menu="nzDropdownMenu">
    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-menu>
    22.   `,
    23.   styles: [
    24.     `
    25.       [nz-button] {
    26.         margin-right: 8px;
    27.         margin-bottom: 12px;
    28.       }
    29.     `
    30.   ]
    31. })
    32. export class NzDemoButtonMultipleComponent {}

    幽灵按钮

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

    Button按钮 - 图10

    危险按钮

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

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

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

    按钮的属性说明如下：

    nz-button-groupcomponent

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