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

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

<article>
  <section class="markdown"><h1>Tag 标签</h1>
    <section class="markdown"><p>进行标记和分类的小标签。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>用于标记事物的属性和维度。</p></li>
        <li><p>进行分类。</p></li>
      </ul>
    </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-tag-demo-basic" [nzCode]="NzDemoTagBasicCode">
        <nz-demo-tag-basic demo></nz-demo-tag-basic>
        <div intro>
          <p>基本标签的用法，可以通过添加 <code>nzClosable</code> 变为可关闭标签。可关闭标签具有 <code>nzBeforeClose</code> <code>nzClose</code> 两个事件。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'动态添加和删除'" id="components-tag-demo-control" [nzCode]="NzDemoTagControlCode">
        <nz-demo-tag-control demo></nz-demo-tag-control>
        <div intro>
          <p>用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 <code>nzClose</code>  实现。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'热门标签'" id="components-tag-demo-hot-tags" [nzCode]="NzDemoTagHotTagsCode">
        <nz-demo-tag-hot-tags demo></nz-demo-tag-hot-tags>
        <div intro>
          <p>选择你感兴趣的话题。</p>
        </div>
      </nz-code-box>

    </div>
    <div nz-col [nzSpan]="12">

      <nz-code-box [nzTitle]="'多彩标签'" id="components-tag-demo-colorful" [nzCode]="NzDemoTagColorfulCode">
        <nz-demo-tag-colorful demo></nz-demo-tag-colorful>
        <div intro>
          <p>我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'可选择'" id="components-tag-demo-checkable" [nzCode]="NzDemoTagCheckableCode">
        <nz-demo-tag-checkable demo></nz-demo-tag-checkable>
        <div intro>
          <p>可通过 <code>nz-checkable-tag</code> 实现类似 Checkbox 的效果，点击切换选中效果。</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="Tag"><span>nz-tag</span>
      <!-- <a class="anchor">#</a> -->
    </h3>

    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>双向绑定</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzClosable</td>
          <td>标签是否可以关闭</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzColor</td>
          <td>标签色</td>
          <td>string</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzBeforeClose</td>
          <td>关闭前事件，参数为：(event: Event)。可以通过设置 <code>event.preventDefault();</code> 来阻止标签关闭。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzClose</td>
          <td>关闭后事件，参数为：(event: Event)，此时关闭的动画已完成。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>

    <h3 id="Checkable-Tag"><span>nz-checkable-tag</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>双向绑定</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzChecked</td>
          <td>设置标签的选中状态</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzClosable</td>
          <td>标签是否可以关闭</td>
          <td>bool</td>
          <td>否</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzColor</td>
          <td>标签色</td>
          <td>string</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzBeforeClose</td>
          <td>关闭前的事件，参数为：(event: Event): void。可以通过设置 <code>event.preventDefault();</code> 来阻止标签关闭。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzClose</td>
          <td>关闭后事件，参数为：(event: Event): void，此时关闭的动画已完成。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzChange</td>
          <td>点击标签时触发的事件，参数为：(checked: boolean): void。</td>
          <td>Event</td>
          <td>否</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>