Toast轻提示 - 图1

Toast 轻提示

基本用法

  1. import { Toast, Cell, Button, Icon } from 'zarm';
  2. const Demo = () => (
  3. <>
  4. <Cell
  5. description={
  6. <Button
  7. size="xs"
  8. onClick={() => {
  9. Toast.show('默认3秒自动关闭');
  10. }}
  11. >
  12. 开启
  13. </Button>
  14. }
  15. >
  16. 普通
  17. </Cell>
  18. <Cell
  19. description={
  20. <Button
  21. size="xs"
  22. onClick={() => {
  23. Toast.show({
  24. content: '指定5秒后自动关闭',
  25. stayTime: 5000,
  26. afterClose: () => {
  27. console.log('Toast已关闭');
  28. }
  29. })
  30. }}
  31. >
  32. 开启
  33. </Button>
  34. }
  35. >
  36. 指定停留时间
  37. </Cell>
  38. <Cell
  39. description={
  40. <Button
  41. size="xs"
  42. onClick={() => {
  43. Toast.show({
  44. content: '不可同时进行其他交互',
  45. mask: true,
  46. afterClose: () => {
  47. console.log('Toast已关闭');
  48. }
  49. })
  50. }}
  51. >
  52. 开启
  53. </Button>
  54. }
  55. >
  56. 有遮罩层
  57. </Cell>
  58. <Cell
  59. description={
  60. <Button
  61. size="xs"
  62. onClick={() => {
  63. Toast.show(
  64. <div className="box">
  65. <Icon className="box-icon" type="right-round-fill" />
  66. <div className="box-text">
  67. 预约成功
  68. </div>
  69. </div>
  70. );
  71. }}
  72. >
  73. 开启
  74. </Button>
  75. }
  76. >
  77. 自定义内容
  78. </Cell>
  79. </>
  80. );
  81. ReactDOM.render(<Demo />, mountNode);

API

属性类型默认值说明
visiblebooleanfalse是否展示
contentReactNode-显示的内容
stayTimenumber3000自动关闭前停留的时间(单位:毫秒)
maskbooleanfalse是否展示遮罩层
onMaskClick() => void-点击遮罩层时触发的回调函数
afterClose() => void-Toast隐藏后的回调函数
getContainerHTMLElement | () => HTMLElementdocument.body指定Toast挂载的HTML节点

静态方法

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