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

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

<article>
  <section class="markdown"><h1>Alert 警告提示</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-alert-demo-basic" [nzCode]="NzDemoAlertBasicCode">
        <nz-demo-alert-basic demo></nz-demo-alert-basic>
        <div intro>
          <p>最简单的用法。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'可关闭的警告提示'" id="components-alert-demo-closeable" [nzCode]="NzDemoAlertCloseableCode">
        <nz-demo-alert-closeable demo></nz-demo-alert-closeable>
        <div intro>
          <p>显示关闭按钮，点击可关闭警告提示。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'图标'" id="components-alert-demo-icon" [nzCode]="NzDemoAlertIconCode">
        <nz-demo-alert-icon demo></nz-demo-alert-icon>
        <div intro>
          <p>可口的图标让信息类型更加醒目。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'四种样式'" id="components-alert-demo-4-type" [nzCode]="NzDemoAlert4TypeCode">
        <nz-demo-alert-4-style demo></nz-demo-alert-4-style>
        <div intro>
          <p>共有四种样式 <code>success</code>、<code>info</code>、<code>warning</code>、<code>error</code></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'含有辅助性文字介绍'" id="components-alert-demo-4-type-message" [nzCode]="NzDemoAlert4TypeMessageCode">
        <nz-demo-alert-4-type-message demo></nz-demo-alert-4-type-message>
        <div intro>
          <p>含有辅助性文字介绍的警告提示。</p>
        </div>
      </nz-code-box>

      <nz-code-box [nzTitle]="'自定义关闭'" id="components-rate-demo-disabled" [nzCode]="NzDemoAlertIconSelfCode">
        <nz-demo-alert-self-close demo></nz-demo-alert-self-close>
        <div intro>
          <p>可以自定义关闭，自定义的文字会替换原先的关闭 <code>Icon</code></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="Rate"><span>nz-alert</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzType</td>
          <td>必选参数，指定警告提示的样式，有四种选择 <code>success</code>、<code>info</code>、<code>warning</code>、<code>error</code></td>
          <td>String</td>
          <td><code>info</code></td>
        </tr>
        <tr>
          <td>nzCloseable</td>
          <td>可选参数，默认不显示关闭按钮</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzCloseText</td>
          <td>可选参数，自定义关闭按钮</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzMessage</td>
          <td>与alert-body标签二选一，警告提示内容</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzDescription</td>
          <td>可选参数，警告提示的辅助性文字介绍</td>
          <td>String</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzOnClose</td>
          <td>可选参数，关闭时触发的回调函数</td>
          <td>function</td>
          <td>无</td>
        </tr>
        <tr>
          <td>nzShowIcon</td>
          <td>可选参数，是否显示辅助图标</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>nzBanner</td>
          <td>是否用作顶部公告	</td>
          <td>Boolean</td>
          <td>false</td>
        </tr>
        <tr>
          <td>[alert-body]</td>
          <td>与nzMessage二选一，定义Message</td>
          <td>ng-content</td>
          <td>无</td>
        </tr>
        <tr>
          <td>[alert-description]</td>
          <td>可选参数，定义Description</td>
          <td>ng-content</td>
          <td>无</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>