相信使用过代码块复制按钮的用户,对 Snackbar 并不陌生,其告知用户应用程序执行的结果。本文将举例说明如何使用 Snackbar,以满足用户对自定义交互的需要。

API#

FunctionDescription
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。