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

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

<article>
  <section class="markdown"><h1>Avatar 头像</h1>
    <section class="markdown"><p>用来代表用户或事物，支持图片、图标或字符展示。</p></section>
    <h2 id="代码演示">代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12" id="components-avatar-demo-basic">
      <nz-code-box [nzTitle]="'基本'" [nzCode]="NzDemoAvatarBasicCode">
        <nz-demo-avatar-basic demo></nz-demo-avatar-basic>
        <div intro>
          <p>头像有三种尺寸，两种形状可选。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12" id="components-avatar-demo-type">
      <nz-code-box [nzTitle]="'类型'" [nzCode]="NzDemoAvatarTypeCode">
        <nz-demo-avatar-type demo></nz-demo-avatar-type>
        <div intro>
          <p>支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12" id="components-avatar-demo-autosize">
      <nz-code-box [nzTitle]="'自动调整字符大小'" [nzCode]="NzDemoAvatarAutoSizeCode">
        <nz-demo-avatar-autosize demo></nz-demo-avatar-autosize>
        <div intro>
          <p>对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12" id="components-avatar-demo-badge">
      <nz-code-box [nzTitle]="'带徽标的头像'" [nzCode]="NzDemoAvatarBadgeCode">
        <nz-demo-avatar-badge demo></nz-demo-avatar-badge>
        <div intro>
          <p>通常用于消息提示。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <a class="avatar">#</a>
    </h2>
    <h3 id="API-Anchor"><span>nz-avatar</span>
      <a class="avatar">#</a>
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzShape</td>
          <td>指定头像的形状</td>
          <td><code>circle</code> <code>square</code></td>
          <td><code>circle</code></td>
        </tr>
        <tr>
          <td>nzSize</td>
          <td>设置头像的大小</td>
          <td><code>default</code> <code>large</code> <code>small</code></td>
          <td><code>default</code></td>
        </tr>
        <tr>
          <td>nzText</td>
          <td>文本类头像</td>
          <td>string</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzSrc</td>
          <td>图片类头像的资源地址；倘若图片加载失败，自动显示 <code>nzIcon</code> > <code>nzText</code>。</td>
          <td>string</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzIcon</td>
          <td>设置头像的图标类型，参考 <code>icon</code> 组件</td>
          <td>string</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>