Snackbar

Snackbar 元件會通知使用者應用程式已執行或將要執行的動作。

簡介

Snackbar 為使用者提供關於應用程式流程的簡短暫時訊息，而不會中斷其活動或體驗。

Snackbar 元件旨在顯示在螢幕上，以通知使用者應用程式正在執行的動作。

元件

import { Snackbar } from '@mui/base/Snackbar';

Snackbar 不對其實現方式施加任何限制——由您自行設計，使其不會中斷使用者體驗，並在設定的時間後消失，而無需使用者採取任何動作。

使用 autoHideDuration 屬性設定 Snackbar 在螢幕上停留的時間（以毫秒為單位）。

以下示範說明了 Snackbar 的基本用法。點擊開啟 Snackbar 以查看其行為

結構

Snackbar 元件由單個根 <div> 插槽組成，沒有內部插槽

<div role="presentation" className="BaseSnackbar-root">snackbar content</div>

自訂結構

使用 slots.root 屬性以自訂元素覆寫根插槽

<Snackbar slots={{ root: 'span' }} />

搭配 TypeScript 使用

在 TypeScript 中，您可以將 slots.root 中使用的自訂元件類型指定為未樣式化元件的泛型。這樣，您可以安全地直接在元件上提供自訂元件的屬性

<Snackbar<typeof CustomComponent> slots={{ root: CustomComponent }} customProp />

相同的概念適用於自訂原始元素特定的屬性

<Snackbar<'button'> slots={{ root: 'button' }} onClick={() => {}} />

Hook

import { useSnackbar } from '@mui/base/useSnackbar';

useSnackbar Hook 讓您可以將 Snackbar 的功能應用於完全自訂的元件。

它會傳回要放置在自訂元件上的屬性，以及代表元件內部狀態的欄位。

Hook不支援插槽屬性，但它們確實支援自訂屬性。

如果您使用 Click-Away Listener 讓使用者透過點擊 Snackbar 外部來關閉它，請確保將此 Hook 傳回的 onClickAway 處理常式傳遞給 Click-Away Listener。

將 open 狀態傳遞給 Hook，並使用它來顯示和隱藏 Snackbar。

以下示範顯示如何使用 useSnackbar Hook 建構完全自訂的元件，該元件也包含 Click-Away Listener 元件

自訂

轉場效果

您可以使用 render prop 子項和轉場元件來動畫化 Snackbar 的開啟和關閉狀態，只要該元件符合以下條件

• 是 Snackbar 的直接子系後代
• 具有 in 屬性——這對應於開啟狀態
• 將 exited 屬性傳遞給 Snackbar
• 在進入轉場開始時呼叫 onEnter 回呼屬性——將 exited 設定為 false
• 在退出轉場完成時呼叫 onExited 回呼屬性——將 exited 設定為 true

這兩個回呼允許 Snackbar 在關閉時卸載子內容，並使其保持完全轉場。這僅適用於您使用內部使用 react-transition-group 程式庫的轉場元件。

以下示範顯示如何建立具有自訂轉場效果的 Snackbar