Users who have used the block copy button are no stranger to the Snackbar, which informs the user of the results of the application’s execution. This article will give an example of how to use Snackbar to meet the user’s need for custom interaction.

API#

FunctionDescription
show(body: String, duration: number = 2000)body: the body of the message, duration: the duration of the message, in milliseconds.

Export#

Thanks to assets/main/js/custom.ts, we can customize the JavaScript, here we export the whole Snackbar as a global variable:

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

Usage#

Then we can call it up in HTML or JavaScript:

1<button onclick="Snackbar.show('message from a button')">Snackbar</button>

See Hooks for how to inject custom HTML.