live demo
using yarn
yarn add react-material-toast
using npm
npm install --save react-material-toast
usage
live demo
import React from 'react';
import ToastServive from 'react-material-toast';
const toast = ToastServive.new({
place:'topRight',
duration:2,
maxCount:8
});
const App = () => {
const onClick = () => {
const id = toast.success('hello world',()=>{
console.log('closed')
});
}
const onErrorClick = () => {
const id = toast.error('hello world');
}
const onInfoClick = () => {
const id = toast.info('hello world');
}
const onWarningClick = () => {
const id = toast.warning('hello world');
}
const onRemoveAll = () => {
toast.removeAll();
}
return (
<div>
<button onClick={onClick} >success</button>
<button onClick={onErrorClick} >error</button>
<button onClick={onInfoClick} >info</button>
<button onClick={onWarningClick} >warning</button>
<button onClick={onRemoveAll} >RemoveAll</button>
</div>
)
}
export default App;
API
toast
组件提供了一些服务方法，使用方式和参数如下：
toast.success(content,[closedCallBack]) toast.error(content,[closedCallBack]) toast.info(content,[closedCallBack]) toast.warning(content,[closedCallBack])| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 消息内容 | string | topRight |
| closedCallBack | 关闭时的回调 | function | - |
const toast = ToastServive.new(props);
props details:
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| place | 弹出位置，可选 topLeft topRight bottomLeft bottomRight |
string | topRight |
| maxCount | 同一时间可展示的最大提示数量 | number | 8 |
| duration | 持续时间(秒)，当设置为0时不消失 | number | 4 |
| closable | 是否允许手动关闭 | Boolean | true |
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
