• Toast轻提示
    • 规则
  • 代码演示
  • API

    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()