Toast轻提示

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

规则

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

代码演示

基本用法

最简单的用法。

  1. import { Component } from '@angular/core';
  2. import { ToastService } from 'ng-zorro-antd-mobile';
  3. @Component({
  4. selector: 'demo-toast-basic',
  5. template: `
  6. <WingBlank>
  7. <div Button (onClick)="showToast()">text only</div>
  8. <WhiteSpace></WhiteSpace>
  9. <div Button (onClick)="showToastNoMask()">without mask</div>
  10. <WhiteSpace></WhiteSpace>
  11. <div Button (onClick)="showToastTop()">position top</div>
  12. <WhiteSpace></WhiteSpace>
  13. <div Button (onClick)="showToastBottom()">position bottom</div>
  14. <WhiteSpace></WhiteSpace>
  15. <div Button (onClick)="showCustomIcon(content)">custom content</div>
  16. <WhiteSpace></WhiteSpace>
  17. <div Button (onClick)="successToast()">success</div>
  18. <WhiteSpace></WhiteSpace>
  19. <div Button (onClick)="failToast()">fail</div>
  20. <WhiteSpace></WhiteSpace>
  21. <div Button (onClick)="offline()">network failure</div>
  22. <WhiteSpace></WhiteSpace>
  23. <div Button (onClick)="loadingToast()">loading</div>
  24. <WhiteSpace></WhiteSpace>
  25. <ng-template #content>
  26. <p>toast的内容</p>
  27. <p>toast的内容</p>
  28. </ng-template>
  29. </WingBlank>
  30. `
  31. })
  32. export class DemoToastBasicComponent {
  33. constructor(private _toast: ToastService) {}
  34. showToast() {
  35. const toast = ToastService.show('This is a toast tips !!!', 0);
  36. setTimeout(() => {
  37. ToastService.hide();
  38. }, 3000);
  39. }
  40. showToastNoMask() {
  41. const toast = ToastService.info('Toast without mask !!!', 4000, null, false);
  42. }
  43. showToastTop() {
  44. const toast = ToastService.info('Toast position top', 4000, null, false, 'top');
  45. }
  46. showToastBottom() {
  47. const toast = ToastService.info('Toast position top', 4000, null, false, 'bottom');
  48. }
  49. showCustomIcon(event) {
  50. const toast = ToastService.info(event);
  51. }
  52. successToast() {
  53. const toast = ToastService.success('Load success !!!', 3000, () => {
  54. console.log('success');
  55. });
  56. }
  57. failToast() {
  58. const toast = ToastService.fail('Load failed !!!', 1000);
  59. }
  60. offline() {
  61. const toast = ToastService.offline('Network connection failed !!!', 1000);
  62. }
  63. loadingToast() {
  64. const toast = ToastService.loading('Loading...', 3000, () => {
  65. console.log('Load complete !!!');
  66. });
  67. }
  68. }

Toast 轻提示 - 图1

API

  • ToastService.success(content, duration, onClose, mask)
  • ToastService.fail(content, duration, onClose, mask)
  • ToastService.info(content, duration, onClose, mask)
  • ToastService.loading(content, duration, onClose, mask)
  • ToastService.offline(content, duration, onClose, mask) 组件提供了五个静态方法,参数如下:
属性说明类型默认值
content提示内容TemplateRef or String
duration自动关闭的延时,单位毫秒number3000
onClose关闭后回调Function
mask是否显示透明蒙层,防止触摸穿透Booleantrue
positionenum{'top', 'middle', 'bottom'}string'middle'

注: duration = 0 时,onClose 无效,toast 不会消失;隐藏 toast 需要手动调用 hide

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

  • ToastService.hide()