Toast 轻提示

定义／Definition

规则 / Rule

• 当出现此提示时，除返回操作外，其他操作均不可用。

• 当用于加载场景时，超过 10 秒未刷新成功则停止刷新并给出提示反馈；

• toast在页面展示的位置为水平居中、垂直居中。

• 淡入淡出动画各0.4s

代码演示

普通

import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
function showToast() {
  Toast.info('这是一个 toast 提示!!!');
}
function successToast() {
  Toast.success('加载成功!!!', 2);
}
function failToast() {
  Toast.fail('加载失败!!!');
}
function offline() {
  Toast.offline('网络连接失败!!!');
}
function loadingToast() {
  Toast.loading('加载中...', () => {
    console.log('加载完成!!!');
  });
}
const ToastExample = React.createClass({
  render() {
    return (
      <div className="toast-container">
        <WhiteSpace />
        <WingBlank>
          <Button type="primary" onClick={showToast}>纯文字 toast</Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank>
          <Button type="primary" ghost onClick={successToast}>成功 toast</Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank>
          <Button type="primary" onClick={failToast}>失败 toast</Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank>
          <Button type="primary" ghost onClick={offline}>网络 toast</Button>
        </WingBlank>
        <WhiteSpace />
        <WingBlank>
          <Button type="primary" onClick={loadingToast}>加载中 toast</Button>
        </WingBlank>
        <WhiteSpace />
      </div>
    );
  },
});
ReactDOM.render(<ToastExample />, mountNode);

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)

• Toast.hide()