Snackbar

Snackbar，也常被稱為 Toast，元件會告知使用者應用程式已執行或將執行的動作。

簡介

Snackbar 的設計旨在為使用者提供簡短、非侵入性的通知，告知他們應用程式已執行或將執行的程序。

預設情況下，snackbar 會顯示在螢幕的右下角。它們的設計目的在於不中斷使用者的工作流程，並且可以自動關閉，無需任何使用者互動。

Snackbar 包含與所執行操作直接相關的單行文字。它們可以包含文字動作，但不包含圖示。

基本

import Snackbar from '@mui/joy/Snackbar';

位置

snackbar 的位置可以透過指定 anchorOrigin 屬性來控制。

在較寬的版面配置中，snackbar 可以靠左或置中對齊，尤其當它們持續定位在螢幕底部的特定位置時。然而，在某些情況下，您可能需要更彈性的定位。

{buttons}
<Snackbar
  anchorOrigin={{ vertical, horizontal }}
  open={open}
  onClose={handleClose}
  key={vertical + horizontal}
>
  I love snacks
</Snackbar>

{buttons}
<Snackbar
  anchorOrigin={{ vertical, horizontal }}
  open={open}
  onClose={handleClose}
  key={vertical + horizontal}
>
  I love snacks
</Snackbar>

按下 Enter 鍵開始編輯

客製化

變體

Snackbar 元件支援 Joy UI 的四種全域變體：plain、outlined (預設)、soft 和 solid。

尺寸

Snackbar 元件提供三種尺寸：sm、md (預設) 和 lg。

顏色

主題中包含的每個調色盤都可以透過 color 屬性使用。試著搭配不同的顏色和不同的變體。

隱藏持續時間

使用 autoHideDuration 屬性來控制 Snackbar 顯示的時間長度。如果未提供，Snackbar 將會持續顯示，直到使用者關閉它。

自動隱藏持續時間 (毫秒)

關閉原因

Snackbar 關閉的原因有三種

timeout：Snackbar 在 autoHideDuration 屬性計時器到期後關閉。
clickaway：當使用者在 Snackbar 外部互動時，Snackbar 會關閉。
escapeKeyDown：當使用者按下 Esc 鍵時，Snackbar 會關閉。

您可以從 onClose 回呼的第二個引數存取該值。

<Snackbar onClose={(event, reason) => {
  // reason will be one of: timeout, clickaway, escapeKeyDown
}}>

忽略 clickaway

當您不希望 Snackbar 在使用者點擊外部時關閉時，此模式非常有用。

<Snackbar
  onClose={(event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
  }}
>

裝飾器

使用 startDecorator 和 endDecorator 屬性將圖示和/或動作附加到 Snackbar 的任一側。

反轉顏色

當 Snackbar 的變體為 soft 或 solid 時，您可以將 invertedColors 屬性設定為 true，以反轉子元素的顏色，從而提高對比度。

若要深入了解，請查看顏色反轉功能。

動畫

若要套用自訂動畫，請提供 animationDuration 屬性，我們將使用它來準確匹配元件的卸載動畫。

API

請參閱以下文件，以取得此處提及之元件可用的所有屬性和類別的完整參考。

<Snackbar />

Snackbar

Playground

忽略 clickaway