相信使用過代碼塊復製按鈕的用戶,對 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。