相信使用过代码块复制按钮的用户,对 Snackbar 并不陌生,其告知用户应用程序执行的结果。本文将举例说明如何使用 Snackbar,以满足用户对自定义交互的需要。
API#
Function | Description |
---|---|
show(body: String, duration: number = 2000) | body :消息正文、duration :显示时间,单位毫秒。 |
导出#
得益于 assets/main/js/custom.ts
,我们可以自定义 JavaScript,这里我们将整个 Snackbar 导出为全局变量:
1import Snackbar from 'js/snackbar';
2
3// Show a message via JavaScript.
4Snackbar.show('a message with 3s duration from pure JavaScript', 3000)
5
6// Export the Snackbar as a global variable, so that you can send a message from a HTML.
7// Such as: <button onclick="Snackbar.show('message from a button')">Snackbar</button>.
8const _global = (window || global ) as any
9_global.Snackbar = Snackbar
使用#
接着我们就可以在 HTML 或 JavaScript 中进行调用:
1<button onclick="Snackbar.show('message from a button')">Snackbar</button>
参阅钩子 以了解如何注入自定义 HTML。
评论