Toast 轻提示

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

规则

  • 一次只显示一个 toast。

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

代码演示

基本

text、icon、success、failure、offline、loading 

  1. import { Toast, WhiteSpace, WingBlank, Button, Icon } 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. }
  28. /* eslint global-require: 0 */
  29. const ToastExample = () => (
  30.   <WingBlank>
  31.     <WhiteSpace />
  32.     <Button onClick={showToast}>Text toast</Button>
  33.     <WhiteSpace />
  34.     <Button onClick={showToastNoMask}>Without mask</Button>
  35.     <WhiteSpace />
  36.     <Button onClick={() => Toast.info(<Icon type={require('./reload.svg')} />, 1)}>
  37.       Cumstom Icon
  38.     </Button>
  39.     <WhiteSpace />
  40.     <Button onClick={successToast}>Success toast</Button>
  41.     <WhiteSpace />
  42.     <Button onClick={failToast}>Failed toast</Button>
  43.     <WhiteSpace />
  44.     <Button onClick={offline}>Network failure toast</Button>
  45.     <WhiteSpace />
  46.     <Button onClick={loadingToast}>Loading toast</Button>
  47.     <WhiteSpace />
  48.   </WingBlank>
  49. );
  51. ReactDOM.render(<ToastExample />, mountNode);

Toast轻提示 - 图1

API

适用平台：WEB、React-Native

  • 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.hide()