snackbar

snackbar 函式是對 <mdui-snackbar> 元件的封裝。使用該函式，你無需編寫元件的 HTML 程式碼，就能開啟一個 snackbar。

使用方式

按需引入函式：

import { snackbar } from 'mdui/functions/snackbar.js';

使用範例：

open

<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "已封存相片",
      action: "復原",
      onActionClick: () => console.log("點擊動作按鈕")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

函式接收一個 Options 物件作為參數；回傳值為 <mdui-snackbar> 元件實例。

Options

屬性名稱	類型	預設值
`message`	`string`	-
Snackbar 中的訊息文字內容
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
Snackbar 出現的位置。預設為 `bottom`。可選值為： `top`：位於頂部，居中對齊 `top-start`：位於頂部，左對齊 `top-end`：位於頂部，右對齊 `bottom`：位於底部，居中對齊 `bottom-start`：位於底部，左對齊 `bottom-end`：位於底部，右對齊
`action`	`string`	-
動作按鈕的文字
`closeable`	`boolean`	`false`
是否在右側顯示關閉按鈕
`messageLine`	`1 \| 2`	-
訊息文字最多顯示幾行。預設不限制行數。可選值為 `1`：訊息文字最多顯示一行 `2`：訊息文字最多顯示兩行
`autoCloseDelay`	`number`	`5000`
在多長時間後自動關閉（單位為毫秒）。設定為 0 時，不自動關閉。預設為 5 秒後自動關閉。
`closeOnOutsideClick`	`boolean`	`false`
點擊或觸碰 Snackbar 以外的區域時是否關閉 Snackbar
`queue`	`string`	-
佇列名稱。預設不啟用佇列，在多次呼叫該函式時，將同時顯示多個 snackbar。可在該參數中傳入一個佇列名稱，具有相同佇列名稱的 snackbar 函式，將在上一個 snackbar 關閉後才開啟下一個 snackbar。
`onClick`	`(snackbar: Snackbar) => void`	-
點擊 Snackbar 時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
點擊動作按鈕時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。預設點擊後會關閉 snackbar；若回傳值為 `false`，則不關閉 snackbar；若回傳值為 promise，則將在 promise 被 resolve 後，關閉 snackbar。
`onOpen`	`(snackbar: Snackbar) => void`	-
Snackbar 開始顯示時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。
`onOpened`	`(snackbar: Snackbar) => void`	-
Snackbar 顯示動畫完成時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。
`onClose`	`(snackbar: Snackbar) => void`	-
Snackbar 開始隱藏時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。
`onClosed`	`(snackbar: Snackbar) => void`	-
Snackbar 隱藏動畫完成時的回呼函式。函式參數為 snackbar 實例，`this` 也指向 snackbar 實例。

Chapitre précédent

prompt

Chapitre suivant

getTheme