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 提示!!!', 1);
  5. }
  7. function successToast() {
  8.   Toast.success('加载成功!!!', 1);
  9. }
  11. function failToast() {
  12.   Toast.fail('加载失败!!!', 1);
  13. }
  15. function offline() {
  16.   Toast.offline('网络连接失败!!!', 1);
  17. }
  19. function loadingToast() {
  20.   Toast.loading('加载中...', 1, () => {
  21.     console.log('加载完成!!!');
  22.   });
  23. }
  25. const ToastExample = React.createClass({
  26.   render() {
  27.     return (
  28.       <div className="toast-container">
  29.         <WhiteSpace />
  30.         <WingBlank>
  31.           <Button type="ghost" onClick={showToast}>纯文字 toast</Button>
  32.         </WingBlank>
  33.         <WhiteSpace />
  34.         <WingBlank>
  35.           <Button type="ghost" onClick={successToast}>成功 toast</Button>
  36.         </WingBlank>
  37.         <WhiteSpace />
  38.         <WingBlank>
  39.           <Button type="ghost" onClick={failToast}>失败 toast</Button>
  40.         </WingBlank>
  41.         <WhiteSpace />
  42.         <WingBlank>
  43.           <Button type="ghost" onClick={offline}>网络 toast</Button>
  44.         </WingBlank>
  45.         <WhiteSpace />
  46.         <WingBlank>
  47.           <Button type="ghost" onClick={loadingToast}>加载中 toast</Button>
  48.         </WingBlank>
  49.         <WhiteSpace />
  50.       </div>
  51.     );
  52.   },
  53. });
  55. ReactDOM.render(<ToastExample />, mountNode);

Toast轻提示 - 图1

API

  • 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无
还提供了全局配置和全局销毁方法：
  • Toast.hide()