Snackbar

Snackbar 在屏幕底部提供关于应用程序进程的简短消息。

使用

  1. <m-snackbar id="m-snackbar-a" button-text="RETRY" msg="Can't send photo. Retry in 5 seconds."></m-snackbar>
  2. <m-snackbar id="m-snackbar-b" button-text="UNDO" msg="Your photo has been archived." leading></m-snackbar>
  3. <m-snackbar id="m-snackbar-c" stacked msg='This item already has the label "travel". You can add a new label.' button-text="ADD A NEW LABEL"></m-snackbar>

Omi 中使用

JSX:

  1. <m-snackbar
  2. onClosed={this.onClosedA}
  3. onButtonClick={this.onButtonClickA}
  4. onIconButtonClick={this.onIconButtonClickA}
  5. buttonText="RETRY"
  6. msg="Can't send photo. Retry in 5 seconds."
  7. show={this.aShow}
  8. ></m-snackbar>
  9. <m-snackbar
  10. onClosed={this.onClosedB}
  11. onButtonClick={this.onButtonClickB}
  12. onIconButtonClick={this.onIconButtonClickB}
  13. buttonText="UNDO"
  14. msg="Your photo has been archived."
  15. leading show={this.bShow}
  16. ></m-snackbar>
  17. <m-snackbar
  18. onClosed={this.onClosedC}
  19. onButtonClick={this.onButtonClickC}
  20. onIconButtonClick={this.onIconButtonClickC}
  21. stacked msg='This item already has the label "travel". You can add a new label.'
  22. buttonText="ADD A NEW LABEL"
  23. show={this.cShow}
  24. ></m-snackbar>

API

Props

NameTypeDefaultsDetails
showboolean是否显示弹窗
stackedboolean按钮与文本分两层
msgstring提示内容
buttonTextstring按钮文本
leadingboolean弹窗出现在主窗口角落
onOpenedfunction打开完成后触发
onClosedfunction关闭完成后触发
onButtonClickfunction单击按钮触发
onIconButtonClickfunction单击图标按钮触发