Shinemo-toast NPM

Toast

使用

参数	类型	备注
content	ReactDOM/String	必填要显示的内容
duration	Number	`duration`毫秒后隐藏
onClose	Function	隐藏后的回调
animate	Boolean	隐藏时是否使用动画
animateDuration	Number	隐藏动画持续的时间

静态方法	类型	备注
show	Function	显示普通Toast
success	Function	显示带成功icon的Toast
error	Function	显示带失败icon的Toast
info	Function	显示带信息icon的Toast

静态方法

Toast.show(content[, duration = 4000, onClose = null, animate = true, animateDuration = 300]) Toast.success(content[, duration = 4000, onClose = null, animate = true, animateDuration = 300]) Toast.error(content[, duration = 4000, onClose = null, animate = true, animateDuration = 300]) Toast.info(content[, duration = 4000, onClose = null, animate = true, animateDuration = 300])

import React from 'react'
import ReactDOM from 'react-dom'
import Toast from '@xm/Toast'

const onClose = () => {
  console.log('toast close')
}

const showToast = () => {
  Toast.show('这是一条普通的toast', 3000, onClose, true, 300)
}

const showSuccessToast = () => {
  Toast.success('评论发表成功！')
}

const showErrorToast = () => {
  Toast.error('评论发表失败！')
}

const showInfoToast = () => {
  Toast.error('这是一条提示！')
}

window.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render((<div>
    <button onClick={showToast}>showToast</button>
    <button onClick={showSuccessToast}>showSuccessToast</button>
    <button onClick={showErrorToast}>showErrorToast</button>
    <button onClick={showInfoToast}>showInfoToast</button>
  </div>), document.body)
})

classnames console-polyfill es3ify-webpack-plugin es5-shim export-from-ie8 normalize.css react react-dom

shinemo-web-comment

0.2.1

3 years ago