Toast轻提示

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。

规则

• 一次只显示一个 toast。
• 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

API 调用

constructor(private _toast: ToastService) {}

• this._toast.success(content, duration, onClose, mask)
• this._toast.fail(content, duration, onClose, mask)
• this._toast.info(content, duration, onClose, mask)
• this._toast.loading(content, duration, onClose, mask)
• this._toast.offline(content, duration, onClose, mask)

组件提供了五个静态方法，参数如下：

注： duration = 0 时，onClose 无效，toast 不会消失；隐藏 toast 需要手动调用 hide

还提供了全局配置和全局销毁方法：

• this._toast.hide()

代码演示

基本用法

最简单的用法。

import { Component } from '@angular/core';
import { ToastService } from 'ng-zorro-antd-mobile';
@Component({
  selector: 'demo-toast-basic',
  template: `
    <WingBlank>
      <div Button (onClick)="showToast()">text only</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showToastNoMask()">without mask</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showToastTop()">position top</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showToastBottom()">position bottom</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showCustomIcon(content)">custom content</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="successToast()">success</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="failToast()">fail</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="offline()">network failure</div>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="loadingToast()">loading</div>
      <WhiteSpace></WhiteSpace>
      <ng-template #content>
        <p>toast的内容</p>
        <p>toast的内容</p>
      </ng-template>
    </WingBlank>
  `
})
export class DemoToastBasicComponent {
  constructor(private _toast: ToastService) {}
  showToast() {
    const toast = this._toast.show('This is a toast tips !!!', 0);
    setTimeout(() => {
      this._toast.hide();
    }, 3000);
  }
  showToastNoMask() {
    const toast = this._toast.info('Toast without mask !!!', 4000, null, false);
  }
  showToastTop() {
    const toast = this._toast.info('Toast position top', 4000, null, false, 'top');
  }
  showToastBottom() {
    const toast = this._toast.info('Toast position top', 4000, null, false, 'bottom');
  }
  showCustomIcon(event) {
    const toast = this._toast.info(event);
  }
  successToast() {
    const toast = this._toast.success('Load success !!!', 3000, () => {
      console.log('success');
    });
  }
  failToast() {
    const toast = this._toast.fail('Load failed !!!', 1000);
  }
  offline() {
    const toast = this._toast.offline('Network connection failed !!!', 1000);
  }
  loadingToast() {
    const toast = this._toast.loading('Loading...', 3000, () => {
      console.log('Load complete !!!');
    });
  }
}