Snackbar消息條
消息條元件用來在頁面中顯示簡短的應用程式狀態訊息。
除了直接使用該元件外，mdui 還提供了一個 mdui.snackbar 函式，以簡化 Snackbar 元件的使用。
按需引入元件：
import 'mdui/components/snackbar.js';
按需引入元件的 TypeScript 型別：
import type { Snackbar } from 'mdui/components/snackbar.js';
使用範例：
Photo archived
開啟 Snackbar
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
透過 placement 屬性，你可以設定 Snackbar 的顯示位置。
Photo archived
top-start
Photo archived
top
Photo archived
top-end
Photo archived
bottom-start
Photo archived
bottom
Photo archived
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
原始碼
你可以使用 action 屬性在 Snackbar 的右側加上一個操作按鈕，並透過該屬性指定按鈕的文字。點擊操作按鈕會觸發 action-click 事件。如果你希望操作按鈕顯示為載入中狀態，可以加上 action-loading 屬性。
Photo archived
開啟 Snackbar
<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼你也可以透過 action slot 在 Snackbar 的右側加入自訂元素。
Photo archived
Undo
開啟 Snackbar
<mdui-snackbar class="example-action-slot">
Photo archived
<mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼
加上 closeable 屬性後，Snackbar 的右側會出現一個關閉按鈕。點擊該按鈕會關閉 Snackbar，並觸發 close 事件。
Photo archived
開啟 Snackbar
<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼可以透過 close-button slot 來自訂關閉按鈕的元素。
Photo archived
開啟 Snackbar
<mdui-snackbar closeable class="example-close-button-slot">
Photo archived
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼透過設定 close-icon 屬性，你可以修改預設關閉按鈕中的 Material Icons 圖示。也可以透過 close-icon slot 來自訂關閉按鈕中的圖示元素。
Photo archived
開啟 Snackbar
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼
預設情況下，訊息文字沒有行數限制。你可以透過 message-line 屬性來限制文字行數，最多可以設定為 2 行。
The item already has the label "travel". You can add a new label. You can add a new label.
開啟 Snackbar
<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼
可以使用 auto-close-delay 屬性來設定自動關閉的延遲，單位為毫秒。預設值為 5000 毫秒。
Photo archived
開啟 Snackbar
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼
加上 close-on-outside-click 屬性，你可以設定在點擊 Snackbar 外部區域時關閉 Snackbar。
Photo archived
開啟 Snackbar
<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>
<mdui-button>開啟 Snackbar</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
原始碼| 名稱 |
|---|
open |
Snackbar 開始顯示時觸發。可透過呼叫 event.preventDefault() 阻止 Snackbar 顯示
|
opened |
Snackbar 顯示動畫完成時，事件被觸發
|
close |
Snackbar 開始隱藏時觸發。可透過呼叫 event.preventDefault() 阻止 Snackbar 關閉
|
closed |
Snackbar 隱藏動畫完成時，事件被觸發
|
action-click |
點擊操作按鈕時觸發
|
