ng-ytl-zorro-antd/src/showcase/nz-demo-button/nz-demo-button.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Button 按钮</h1>
    <section class="markdown"><p>按钮用于开始一个即时操作。</p>
      <h2 id="何时使用"><span i18n="test1|test2@@when-to-use">何时使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'按钮类型'" id="components-button-demo-basic" [nzCode]="NzDemoButtonTypeCode">
        <nz-demo-button-type demo></nz-demo-button-type>
        <div intro>
          <p>按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。</p>
          <p>其中 <code>[nzType]="'default'"</code>可以简化为 <code>nzType="default"</code>，之后不再赘述。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'按钮尺寸'" id="components-button-demo-size" [nzCode]="NzDemoButtonSizeCode">
        <nz-demo-button-size demo></nz-demo-button-size>
        <div intro>
          <p>按钮有大、中、小三种尺寸。</p>
          <p>通过设置 <code>nzSize</code> 为 <code>large</code> <code>small</code> 分别把按钮设为大、小尺寸。若不设置 <code>nzSize</code>，则尺寸为中。
          </p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'加载中状态'" id="components-button-demo-loading" [nzCode]="NzDemoButtonLoadingCode">
        <nz-demo-button-loading demo></nz-demo-button-loading>
        <div intro>
          <p>添加 <code>loading</code> 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'按钮组合'" id="components-button-demo-button-group" [nzCode]="NzDemoButtonGroupCode">
        <nz-demo-button-group demo></nz-demo-button-group>
        <div intro>
          <p>可以将多个 <code>nz-button</code> 放入 <code>nz-button-group</code> 的容器中。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'图标按钮'" id="components-button-demo-icon" [nzCode]="NzDemoButtonIconCode">
        <nz-demo-button-icon demo></nz-demo-button-icon>
        <div intro>
          <p>当需要在 <code>button</code> 内嵌入 <code>icon</code> 时，请直接在 <code>button</code> 内使用<code>icon</code></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'不可用状态'" id="components-button-demo-disabled" [nzCode]="NzDemoButtonDisabledCode">
        <nz-demo-button-disabled demo></nz-demo-button-disabled>
        <div intro>
          <p>添加 <code>disabled</code> 属性即可让按钮处于不可用状态，同时按钮样式也会改变。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'多个按钮组合'" id="components-button-demo-multiple" [nzCode]="NzDemoButtonMultipleCode">
        <nz-demo-button-multiple demo></nz-demo-button-multiple>
        <div intro>
          <p>按钮组合使用时，推荐使用1个主操作 + n 个次操作，3个以上操作时把更多操作放到 <code>nz-dropdown button</code> 中组合使用。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'幽灵按钮'" id="components-button-demo-ghost" [nzCode]="NzDemoButtonGhostCode">
        <nz-demo-button-ghost demo></nz-demo-button-ghost>
        <div intro>
          <p>幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>通过设置 button 的属性来产生不同的按钮样式，推荐顺序为：<code>type</code> -&gt;
      <code>shape</code> -&gt;<code>size</code> -&gt;<code>loading</code> -&gt;<code>disabled</code></p>
    <p>按钮的属性说明如下：</p>
    <table>
      <thead>
        <tr>
          <th>属性</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzType</td>
          <td>设置按钮类型，可选值为 <code>primary</code> <code>dashed</code> <code>danger</code> <code>default</code></td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzShape</td>
          <td>设置按钮形状，可选值为 <code>circle</code> 或者不设
          </td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>设置按钮大小，可选值为 <code>small</code> <code>large</code> 或者不设
          </td>
          <td>String</td>
          <td><code>default</code></td>
        </tr>
        <tr>
          <td>nzGhost</td>
          <td>设置幽灵按钮</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzLoading</td>
          <td>设置按钮载入状态</td>
          <td>Boolean</td>
          <td><code>false</code></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>