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
3const _global = (window || global ) as any
4_global.Snackbar = Snackbar

Usage#

Then we can call it up in HTML or JavaScript:

1<button onclick="Snackbar.show('Triggered by button')">Snackbar</button>