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

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

<article>

  <section class="markdown">
    <h1>Message 全局提示</h1>
    <section class="markdown"><p>全局展示操作反馈信息。</p>
      <h2><span>何时使用</span>
        <a  class="anchor">#</a>
      </h2>
      <ul>
        <li><p>可提供成功、警告和错误等反馈信息。</p></li>
        <li><p>顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。</p></li>
      </ul>
      <h2 id="如何使用">
        <span>如何使用</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>如果要修改message的默认配置，你可以设置提供商<code>NZ_MESSAGE_CONFIG</code>的值来修改。
      <p>（如：在你的模块的providers中加入 <code>{{ '{' }} provide: NZ_MESSAGE_CONFIG, useValue: {{ '{' }} nzDuration: 3000 {{ '}' }} {{ '}' }}</code>，<code>NZ_MESSAGE_CONFIG</code>可以从<code>ng-zorro-antd</code>导入）</p>
      <p>默认配置为</p>
      <pre style="font-size:12px;"> {{ '{' }}
    nzDuration             : 1500,
    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-message-demo-basic" [nzCode]="NzDemoMessageBasicCode">
        <nz-demo-message-basic demo></nz-demo-message-basic>
        <div intro>
          <p>信息提醒反馈。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义时长提示'" id="components-message-demo-duration" [nzCode]="NzDemoMessageDurationCode">
        <nz-demo-message-duration demo></nz-demo-message-duration>
        <div intro>
          <p>自定义时长 <code>10s</code>，默认时长为 <code>1.5s</code>。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'其他提示类型'" id="components-message-demo-icon" [nzCode]="NzDemoMessageIconCode">
        <nz-demo-message-icon demo></nz-demo-message-icon>
        <div intro>
          <p>包括成功、失败、警告。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'加载中'" id="components-message-demo-loading" [nzCode]="NzDemoMessageLoadingCode">
        <nz-demo-message-loading demo></nz-demo-message-loading>
        <div intro>
          <p>进行全局 loading，异步自行移除。</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_MESSAGE_CONFIG）</span><!-- <a class="anchor">#</a> --></h4>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <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>Boolean</td>
          <td>true</td>
          <td>鼠标移上时暂停倒计时（可用于NzNotificationService中）</td>
        </tr>
        <tr>
          <td>nzAnimate</td>
          <td>Boolean</td>
          <td>true</td>
          <td>开关动画效果（可用于NzNotificationService中）</td>
        </tr>
      </tbody>
    </table>
    <h4><span>NzMessageService服务</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>loading</td>
          <td><code>(content: string, options?: Object)</code></td>
          <td>加载中</td>
        </tr>
        <tr>
          <td>success</td>
          <td><code>(content: string, options?: Object)</code></td>
          <td>成功消息</td>
        </tr>
        <tr>
          <td>error</td>
          <td><code>(content: string, options?: Object)</code></td>
          <td>失败消息</td>
        </tr>
        <tr>
          <td>warning</td>
          <td><code>(content: string, options?: Object)</code></td>
          <td>警告消息</td>
        </tr>
        <tr>
          <td>info</td>
          <td><code>(content: string, options?: Object)</code></td>
          <td>信息消息</td>
        </tr>
        <tr>
          <td>create</td>
          <td><code>(type: 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>