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

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

<article>

  <section class="markdown">
    <h1>Notification 通知提醒框</h1>
    <section class="markdown"><p>全局展示通知提醒信息。</p>
      <h2 id="何时使用"><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <p>在系统右上角显示通知提醒信息。经常用于以下情况：</p>
      <ul>
        <li><p>较为复杂的通知内容。</p></li>
        <li><p>带有交互的通知，给出用户下一步的行动点。</p></li>
        <li><p>系统主动推送。</p></li>
      </ul>
      <h2 id="如何使用"><span>如何使用</span><!-- <a class="anchor">#</a> -->
      </h2>
      <p>与Message类似，如果要修改message的默认配置，你可以设置提供商<code>NZ_NOTIFICATION_CONFIG</code>的值来修改。
      <p>（如：在你的模块的providers中加入 <code>{{ '{' }} provide: NZ_NOTIFICATION_CONFIG, useValue: {{ '{' }} nzDuration: 3000 {{ '}' }} {{ '}' }}</code>，<code>NZ_NOTIFICATION_CONFIG</code>可以从<code>ng-zorro-antd</code>导入）</p>
      <p>默认配置为</p>
      <pre style="font-size:12px;"> {{ '{' }}
    nzTop                  : '24px',
    nzRight                : '0px',
    nzDuration             : 4500,
    nzMaxStack             : 7,
    nzPauseOnHover         : true,
    nzAnimate              : true
 {{ '}' }}</pre>
    </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-notification-demo-basic" [nzCode]="NzDemoNotificationBasicCode">
        <nz-demo-notification-basic demo></nz-demo-notification-basic>
        <div intro>
          <p>最简单的用法，4.5 秒后自动关闭。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'带有icon的通知提醒框'" id="components-notification-demo-icon" [nzCode]="NzDemoNotificationIconCode">
        <nz-demo-notification-icon demo></nz-demo-notification-icon>
        <div intro>
          <p>通知提醒框左侧有图标。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'自动关闭的延时'" id="components-notification-demo-duration" [nzCode]="NzDemoNotificationDurationCode">
        <nz-demo-notification-duration demo></nz-demo-notification-duration>
        <div intro>
          <p>自定义通知框自动关闭的延时，默认<code>4.5s</code>，取消自动关闭只要将该值设为 <code>0</code> 即可。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义'" id="components-notification-demo-html" [nzCode]="NzDemoNotificationHtmlCode">
        <nz-demo-notification-html demo></nz-demo-notification-html>
        <div intro>
          <p>自定义通知栏内HTML，注意防止XSS</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API"><span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <h4><span>全局配置（NZ_NOTIFICATION_CONFIG）</span><!-- <a class="anchor">#</a> --></h4>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzTop</td>
          <td>String</td>
          <td>24px</td>
          <td>顶部距离</td>
        </tr>
        <tr>
          <td>nzRight</td>
          <td>String</td>
          <td>0px</td>
          <td>右侧距离</td>
        </tr>
        <tr>
          <td>nzDuration</td>
          <td>Number</td>
          <td>0</td>
          <td>持续时间,当设置为0时不消失（可用于NzNotificationService中）</td>
        </tr>
        <tr>
          <td>nzMaxStack</td>
          <td>Number</td>
          <td>8</td>
          <td>提示最大堆叠数</td>
        </tr>
        <tr>
          <td>nzPauseOnHover</td>
          <td>bool</td>
          <td>true</td>
          <td>悬停时停止倒计时（可用于NzNotificationService中）</td>
        </tr>
        <tr>
          <td>nzAnimate</td>
          <td>bool</td>
          <td>true</td>
          <td>开关动画效果（可用于NzNotificationService中）</td>
        </tr>
      </tbody>
    </table>
    <h4><span>NzNotificationService服务</span><!-- <a class="anchor">#</a> --></h4>
    <p>提示：以下options参数支持全局配置中的 <code>nzDuration/nzAnimate/nzPauseOnHover</code></p>
    <table>
      <thead>
        <tr>
          <th>方法</th>
          <th>参数</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>blank</td>
          <td><code>(title: string, content: string, options?: Object)</code></td>
          <td>不带图标的提示</td>
        </tr>
        <tr>
          <td>success</td>
          <td><code>(title: string, content: string, options?: Object)</code></td>
          <td>成功提示</td>
        </tr>
        <tr>
          <td>error</td>
          <td><code>(title: string, content: string, options?: Object)</code></td>
          <td>失败提示</td>
        </tr>
        <tr>
          <td>warning</td>
          <td><code>(title: string, content: string, options?: Object)</code></td>
          <td>警告提示</td>
        </tr>
        <tr>
          <td>info</td>
          <td><code>(title: string, content: string, options?: Object)</code></td>
          <td>信息提示</td>
        </tr>
        <tr>
          <td>create</td>
          <td><code>(type: string, title: string, content: string, options?: Object)</code></td>
          <td>提供type属性，可传入'success'等选项</td>
        </tr>
        <tr>
          <td>html</td>
          <td><code>(html: string, options?: Object)</code></td>
          <td>可使用html代码来渲染内容</td>
        </tr>
        <tr>
          <td>remove</td>
          <td><code>(id?: string)</code></td>
          <td>移除特定id的消息，当id为空时，移除所有消息</td>
        </tr>
      </tbody>
    </table>
  </section>
</article>