Toast 轻提示

基本用法

import { Toast, Cell, Button, Icon } from 'zarm';
const Demo = () => (
  <>
    <Cell
      description={
        <Button
          size="xs"
          onClick={() => {
            Toast.show('默认3秒自动关闭');
          }}
        >
          开启
        </Button>
      }
    >
      普通
    </Cell>
    <Cell
      description={
        <Button
          size="xs"
          onClick={() => {
            Toast.show({
              content: '指定5秒后自动关闭',
              stayTime: 5000,
              afterClose: () => {
                console.log('Toast已关闭');
              }
            })
          }}
        >
          开启
        </Button>
      }
    >
      指定停留时间
    </Cell>
    <Cell
      description={
        <Button
          size="xs"
          onClick={() => {
            Toast.show({
              content: '不可同时进行其他交互',
              mask: true,
              afterClose: () => {
                console.log('Toast已关闭');
              }
            })
          }}
        >
          开启
        </Button>
      }
    >
      有遮罩层
    </Cell>
    <Cell
      description={
        <Button
          size="xs"
          onClick={() => {
            Toast.show(
              <div className="box">
                <Icon className="box-icon" type="right-round-fill" />
                <div className="box-text">
                  预约成功
                </div>
              </div>
            );
          }}
        >
          开启
        </Button>
      }
    >
      自定义内容
    </Cell>
  </>
);
ReactDOM.render(<Demo />, mountNode);

API

静态方法

// 显示轻提示 Toast.show(content: ReactNode | ToastProps)
Toast.show('默认3秒自动关闭');
Toast.show({
  content: '指定5秒后自动关闭',
  stayTime: 5000,
  afterClose: () => {
    console.log('Toast已关闭');
  }
});
// 隐藏轻提示
Toast.hide();