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