Toast 轻提示

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

规则

  • 一次只显示一个 toast。

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

代码演示

普通

纯文字、纯图标、成功、失败、离线、loading 

  1. import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
  3. function showToast() {
  4.   Toast.info('这是一个 toast 提示!!!');
  5. }
  7. function successToast() {
  8.   Toast.success('加载成功!!!');
  9. }
  11. function failToast() {
  12.   Toast.fail('加载失败!!!', 1);
  13. }
  15. function offline() {
  16.   Toast.offline('网络连接失败!!!');
  17. }
  19. function loadingToast() {
  20.   Toast.loading('加载中...', 1, () => {
  21.     console.log('加载完成!!!');
  22.   });
  23. }
  25. const ToastExample = React.createClass({
  26.   render() {
  27.     return (
  28.       <WingBlank>
  29.         <WhiteSpace />
  30.         <Button onClick={showToast}>纯文字 toast</Button>
  31.         <WhiteSpace />
  32.         <Button onClick={successToast}>成功 toast</Button>
  33.         <WhiteSpace />
  34.         <Button onClick={failToast}>失败 toast</Button>
  35.         <WhiteSpace />
  36.         <Button onClick={offline}>网络 toast</Button>
  37.         <WhiteSpace />
  38.         <Button onClick={loadingToast}>加载中 toast</Button>
  39.         <WhiteSpace />
  40.       </WingBlank>
  41.     );
  42.   },
  43. });
  45. ReactDOM.render(<ToastExample />, mountNode);

Toast轻提示 - 图1

API ( 适用平台：WEB、React-Native )

  • Toast.success(content, duration, onClose)

  • Toast.fail(content, duration, onClose)

  • Toast.info(content, duration, onClose)

  • Toast.loading(content, duration, onClose)

  • Toast.offline(content, duration, onClose)

组件提供了五个静态方法，参数如下：
参数说明类型默认值
content提示内容React.Element or String无
duration自动关闭的延时，单位秒number3
onClose关闭后回调Function无

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

还提供了全局配置和全局销毁方法：
  • Toast.hide()