## Toast 轻提示

## 代码演示

按钮类型
```tsx
import React from 'react'
import { toast,Button } from 'ui-component-5e';

const pcStyle = {background: '#fff', color: '#000', padding: '10px 16px', fontSize: '14px'}
const EToast: React.FC = () => {
  const clickLoadingToast = () => {
    toast.loading({content: 'loading...'})
    setTimeout(() => {
      toast.hide()
      toast.success({content: '加载完成', duration: 3})
    }, 3000)
  }
  const clickToast = () => {
    toast.info({
      content: '我点了一下',
      position: 'top',
      mask: false,
      // duration: 10,
    })
  }
  const clickMobileToast = () => {
    toast.info({
      content: '我再点了一下',
      // duration: 10,
      // mask: false,
    })
  }
  return (
    <div className="toast-but-box stories-box">
      <Button onClick={() => clickLoadingToast()}>loading Toast</Button>
      <Button onClick={() => clickToast()}>showInfo no-mark</Button>
      <Button onClick={() => clickMobileToast()}>showInfo mark</Button>
    </div>
  )
}
export default () => <EToast />
```

***
## API 
组件提供了一些静态方法，使用方式和参数如下：
* toast.success({content, duration, onClose, mask})

* toast.fail({content, duration, onClose, mask})

* toast.info({content, duration, onClose, mask, contentStyle, position, top})

* toast.loading({content, duration, onClose, mask})

* toast.hide()

|   参数   |  说明   |  类型    |  默认值  |
|  ----   |  ----   |  ----   |  ----   |
|  content  |  提示内容  |  React.Element or String  |  \-  |
|  duration  |  自动关闭的延时，单位秒  |  number  |  3  |
|  mask  |  是否显示透明蒙层，防止触摸穿透  |  Boolean |  true  |
|  position  |  消息位置  | bottom ｜ middle ｜ top  |  middle  |
|  contentStyle  |  消息弹窗样式  | {} |  \-  |
|  top | 距离顶部的距离(当position为top时生效) | number | 36 |
| onClose | toast关闭回调 | () => void | \-