Button按钮

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

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

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

@Component({
  selector: 'nz-demo-button-basic',
  template: `
    <button nz-button nzType="primary">Primary</button>
    <button nz-button nzType="default">Default</button>
    <button nz-button nzType="dashed">Dashed</button>
    <button nz-button nzType="danger">Danger</button>
    <button nz-button nzType="link">Link</button>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonBasicComponent {}

按钮尺寸

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-button-size',
  template: `
    <nz-radio-group [(ngModel)]="size">
      <label nz-radio-button nzValue="large">Large</label>
      <label nz-radio-button nzValue="default">Default</label>
      <label nz-radio-button nzValue="small">Small</label>
    </nz-radio-group>
    <br />
    <br />
    <button nz-button [nzSize]="size" nzType="primary">Primary</button>
    <button nz-button [nzSize]="size" nzType="default">Default</button>
    <button nz-button [nzSize]="size" nzType="dashed">Dashed</button>
    <button nz-button [nzSize]="size" nzType="danger">Danger</button>
    <button nz-button [nzSize]="size" nzType="link">Link</button>
    <br />
    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon nzType="download"></i></button>
    <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
      <i nz-icon nzType="download"></i>Download
    </button>
    <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i>Download</button>
    <br />
    <nz-button-group [nzSize]="size">
      <button nz-button nzType="primary"><i nz-icon nzType="left"></i>Backward</button>
      <button nz-button nzType="primary">Forward<i nz-icon nzType="right"></i></button>
    </nz-button-group>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
      nz-button-group [nz-button] {
        margin-right: 0;
      }
    `
  ]
})
export class NzDemoButtonSizeComponent {
}

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

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-button-button-group',
  template: `
    <h4>Basic</h4>
    <nz-button-group>
      <button nz-button nzType="primary">OK</button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="default" disabled>L</button>
      <button nz-button nzType="default" disabled>M</button>
      <button nz-button nzType="default" disabled>R</button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="primary" disabled>L</button>
      <button nz-button nzType="default" disabled>M</button>
      <button nz-button nzType="default">M</button>
      <button nz-button nzType="dashed" disabled>R</button>
    </nz-button-group>
    <h4>With Icon</h4>
    <nz-button-group>
      <button nz-button nzType="primary"><i nz-icon nzType="left"></i> Go back</button>
      <button nz-button nzType="primary">Go forward<i nz-icon nzType="right"></i></button>
    </nz-button-group>
    <nz-button-group>
      <button nz-button nzType="primary"><i nz-icon nzType="cloud"></i></button>
      <button nz-button nzType="primary"><i nz-icon nzType="cloud-download"></i></button>
    </nz-button-group>
  `,
  styles: [
    `
      h4 {
        margin: 16px 0;
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
      }
      h4:first-child {
        margin-top: 0;
      }
      [nz-button] {
        margin-bottom: 12px;
      }
      nz-button-group {
        margin-bottom: 8px;
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoButtonButtonGroupComponent {}

Block 按钮

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-button-block',
  template: `
    <button nz-button nzType="primary" nzBlock>Primary</button>
    <button nz-button nzType="default" nzBlock>Default</button>
    <button nz-button nzType="dashed" nzBlock>Dashed</button>
    <button nz-button nzType="danger" nzBlock>Danger</button>
    <button nz-button nzType="link" nzBlock>Link</button>
  `,
  styles: [
      [nz-button] {
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonBlockComponent {}

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-button-disabled',
  template: `
    <button nz-button nzType="primary">Primary</button>
    <button nz-button nzType="primary" disabled>Primary(disabled)</button>
    <br />
    <button nz-button nzType="default">Default</button>
    <button nz-button nzType="default" disabled>Default(disabled)</button>
    <button nz-button nzType="dashed">Dashed</button>
    <button nz-button nzType="dashed" disabled>Dashed(disabled)</button>
    <br />
    <button nz-button nzType="link">Link</button>
    <button nz-button nzType="link" disabled>Link(disabled)</button>
    <div style="padding: 8px 8px 0px; background: rgb(190, 200, 200);">
      <button nz-button nzGhost>Ghost</button>
      <button nz-button nzGhost disabled>Ghost(disabled)</button>
    </div>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})
export class NzDemoButtonDisabledComponent {}

多个按钮组合

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-button-multiple',
  template: `
    <button nz-button nzType="primary">primary</button>
    <button nz-button nzType="default">secondary</button>
    <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <a>1st item</a>
        </li>
        <li nz-menu-item>
          <a>2nd item</a>
        </li>
        <li nz-menu-item>
          <a>3rd item</a>
        </li>
      </ul>
    </nz-dropdown-menu>
  `,
  styles: [
    `
      [nz-button] {
        margin-right: 8px;
        margin-bottom: 12px;
      }
    `
  ]
})

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

按钮的属性说明如下：