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

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

<article>
  <section class="markdown"><h1>Badge 徽标数</h1>
    <section class="markdown"><p>图标右上角的圆形徽标数字</p>
      <h2 id="何时使用"><span>何时使用</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-badge-demo-basic" [nzCode]="NzDemoBadgeBasicCode">
        <nz-demo-badge-basic demo></nz-demo-badge-basic>
        <div intro>
          <p>简单的徽章展示。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'封顶数字'" id="components-badge-demo-myceil" [nzCode]="NzDemoBadgeMyCeilCode">
        <nz-demo-badge-myceil demo></nz-demo-badge-myceil>
        <div intro>
          <p>超过 <code>nzOverflowCount</code> 的会显示为 <code>{{ '${nzOverflowCount}+' }}</code>。</p>
        </div>
      </nz-code-box>
      <!--<nz-code-box [nzTitle]="'大数字'" id="components-badge-demo-overflow" [nzCode]="NzDemoBadgeOverFlowCode">-->
        <!--<nz-demo-badge-overflow demo></nz-demo-badge-overflow>-->
        <!--<div intro>-->
          <!--<p>超过 99 的会显示为 <code>99+</code></p>-->
        <!--</div>-->
      <!--</nz-code-box>-->

      <nz-code-box [nzTitle]="'讨嫌的小红点'" id="components-badge-demo-dot" [nzCode]="NzDemoBadgeDotCode">
        <nz-demo-badge-dot demo></nz-demo-badge-dot>
        <div intro>
          <p>没有具体的数字。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'状态点'" id="components-badge-demo-status" [nzCode]="NzDemoBadgeStatusCode">
        <nz-demo-badge-status demo></nz-demo-badge-status>
        <div intro>
          <p>用于表示状态的小圆点。</p>
        </div>
      </nz-code-box>
    </div>

    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'独立使用'" id="components-badge-demo-standalones" [nzCode]="NzDemoBadgeStandAlonesCode">
        <nz-demo-badge-standalones demo></nz-demo-badge-standalones>
        <div intro>
          <p>不包裹任何元素即是独立使用，可自定样式展现。</p>
          <blockquote>
            <p>在右上角的 badge 则限定为红色。</p>
          </blockquote>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'可点击'" id="components-badge-demo-clickable" [nzCode]="NzDemoBadgeClickAbleCode">
        <nz-demo-badge-clickable demo></nz-demo-badge-clickable>
        <div intro>
          <p>用 a 标签进行包裹即可</p>
        </div>
      </nz-code-box>


      <nz-code-box [nzTitle]="'动态'" id="components-badge-demo-animate" [nzCode]="NzDemoBadgeAnimateCode">
        <nz-demo-badge-animate demo></nz-demo-badge-animate>
        <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>
    <h3 id="Badge"><span>nz-badge</span>
      <!-- <a class="anchor">#</a> -->
    </h3>

    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzCount</td>
          <td>展示的数字，大于 nzOverflowCount 时显示为 <code>nzOverflowCount+</code>为 0 时隐藏
          </td>
          <td>Number</td>
          <td></td>
        </tr>
        <tr>
          <td>nzOverflowCount</td>
          <td>展示封顶的数字值</td>
          <td>Number</td>
          <td>99</td>
        </tr>
        <tr>
          <td>nzShowZero</td>
          <td>当添加该属性时，当数值为 0 时，展示 Badge</td>
          <td>attribute</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzDot</td>
          <td>不展示数字，只有一个小红点</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzStatus</td>
          <td>设置 Badge 为状态点</td>
          <td>'success', 'processing, 'default', 'error', 'warning'</td>
          <td></td>
        </tr>
        <tr>
          <td>nzText</td>
          <td>在设置了 <code>nzStatus</code>的前提下有效，设置状态点的文本
          </td>
          <td>String</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </section>
</article>