Toast 轻提示

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

规则

  • 一次只显示一个 toast。

  • 有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

代码演示

基本

  1. import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
  3. function showToast() {
  4.   Toast.info('This is a toast tips !!!', 1);
  5. }
  7. function showToastNoMask() {
  8.   Toast.info('Toast without mask !!!', 2, null, false);
  9. }
  11. function successToast() {
  12.   Toast.success('Load success !!!', 1);
  13. }
  15. function failToast() {
  16.   Toast.fail('Load failed !!!', 1);
  17. }
  19. function offline() {
  20.   Toast.offline('Network connection failed !!!', 1);
  21. }
  23. function loadingToast() {
  24.   Toast.loading('Loading...', 1, () => {
  25.     console.log('Load complete !!!');
  26.   });
  27. }
  29. const customIcon = () => (
  30.   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="am-icon am-icon-md">
  31.     <path fillRule="evenodd" d="M59.177 29.5s-1.25 0-1.25 2.5c0 14.47-11.786 26.244-26.253 26.244C17.206 58.244 5.417 46.47 5.417 32c0-13.837 11.414-25.29 25.005-26.26v6.252c0 .622-.318 1.635.198 1.985a1.88 1.88 0 0 0 1.75.19l21.37-8.545c.837-.334 1.687-1.133 1.687-2.384C55.425 1.99 53.944 2 53.044 2h-21.37C15.134 2 1.667 15.46 1.667 32c0 16.543 13.467 30 30.007 30 16.538 0 29.918-13.458 29.993-30 .01-2.5-1.24-2.5-1.24-2.5h-1.25" />
  32.   </svg>
  33. );
  35. class ToastExample extends React.Component {
  36.   componentDidMount() {
  37.     Toast.loading('Loading...', 30, () => {
  38.       console.log('Load complete !!!');
  39.     });
  41.     setTimeout(() => {
  42.       Toast.hide();
  43.     }, 3000);
  44.   }
  45.   render() {
  46.     return (
  47.       <WingBlank>
  48.         <WhiteSpace />
  49.         <Button onClick={showToast}>text only</Button>
  50.         <WhiteSpace />
  51.         <Button onClick={showToastNoMask}>without mask</Button>
  52.         <WhiteSpace />
  53.         <Button onClick={() => Toast.info(customIcon(), 1)}>
  54.           cumstom icon
  55.         </Button>
  56.         <WhiteSpace />
  57.         <Button onClick={successToast}>success</Button>
  58.         <WhiteSpace />
  59.         <Button onClick={failToast}>fail</Button>
  60.         <WhiteSpace />
  61.         <Button onClick={offline}>network failure</Button>
  62.         <WhiteSpace />
  63.         <Button onClick={loadingToast}>loading</Button>
  64.         <WhiteSpace />
  65.       </WingBlank>
  66.     );
  67.   }
  68. }
  70. ReactDOM.render(<ToastExample />, mountNode);

Toast轻提示 - 图1

API

  • Toast.success(content, duration, onClose, mask)

  • Toast.fail(content, duration, onClose, mask)

  • Toast.info(content, duration, onClose, mask)

  • Toast.loading(content, duration, onClose, mask)

  • Toast.offline(content, duration, onClose, mask)

组件提供了五个静态方法，参数如下：
属性说明类型默认值
content提示内容React.Element or String无
duration自动关闭的延时，单位秒number3
onClose关闭后回调Function无
mask是否显示透明蒙层，防止触摸穿透Booleantrue

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

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

  • Toast.config({ duration, mask })

  • Toast.hide()