Snackbar

Snackbar (也稱為 toasts) 用於簡短通知已執行或將執行的程序。

簡介

Snackbar 元件暫時出現並浮動在 UI 上方，為使用者提供關於應用程式流程的（非關鍵）更新。下面的示範，靈感來自 Google Keep，展示了一個基本的 Snackbar，帶有一個文字元素和兩個動作。

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

按下 Enter 開始編輯

用法

Snackbar 與 Alerts 的不同之處在於，Snackbar 具有固定位置和高 z-index，因此它們旨在跳脫文件流；另一方面，Alerts 通常是流程的一部分——除非它們用作 Snackbar 的子元件。

Snackbar 也與 Dialogs 不同，因為 Snackbar 並非旨在傳達關鍵資訊或阻止使用者與應用程式的其餘部分互動；相比之下，Dialogs 需要使用者輸入才能被關閉。

基礎

匯入

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

位置

使用 anchorOrigin prop 來控制 Snackbar 在螢幕上的位置。

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

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

按下 Enter 開始編輯

內容

import SnackbarContent from '@mui/material/SnackbarContent';

使用 Snackbar Content 元件來為 Snackbar 新增文字和動作。

我喜歡點心。

我喜歡糖果。我喜歡餅乾。我喜歡杯子蛋糕。我喜歡起司蛋糕。我喜歡巧克力。

我喜歡糖果。我喜歡餅乾。我喜歡杯子蛋糕。

我喜歡糖果。我喜歡餅乾。我喜歡杯子蛋糕。我喜歡起司蛋糕。我喜歡巧克力。

自動關閉

使用 autoHideDuration prop 在設定的時間段（以毫秒為單位）後自動觸發 Snackbar 的 onClose 函數。

請確保提供足夠的時間讓使用者處理顯示在上面的資訊。

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message="This Snackbar will be dismissed in 5 seconds."
/>

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar
  open={open}
  autoHideDuration={5000}
  onClose={handleClose}
  message="This Snackbar will be dismissed in 5 seconds."
/>

按下 Enter 開始編輯

轉場效果

您可以使用 TransitionComponent prop 將 Snackbar 的轉場效果從 Grow（預設）更改為其他效果，例如 Slide。

<Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  slots={{ transition: state.Transition }}
  message="I love snacks"
  key={state.Transition.name}
  autoHideDuration={1200}
/>

<Button onClick={handleClick(GrowTransition)}>Grow Transition</Button>
<Button onClick={handleClick(Fade)}>Fade Transition</Button>
<Button onClick={handleClick(SlideTransition)}>Slide Transition</Button>
<Snackbar
  open={state.open}
  onClose={handleClose}
  slots={{ transition: state.Transition }}
  message="I love snacks"
  key={state.Transition.name}
  autoHideDuration={1200}
/>

按下 Enter 開始編輯

自訂

與 Alerts 一起使用

在 Snackbar 內使用 Alert 來傳達具有特定嚴重性的訊息。

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert
    onClose={handleClose}
    severity="success"
    variant="filled"
    sx={{ width: '100%' }}
  >
    This is a success Alert inside a Snackbar!
  </Alert>
</Snackbar>

<Button onClick={handleClick}>Open Snackbar</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert
    onClose={handleClose}
    severity="success"
    variant="filled"
    sx={{ width: '100%' }}
  >
    This is a success Alert inside a Snackbar!
  </Alert>
</Snackbar>

按下 Enter 開始編輯

與浮動操作按鈕一起使用

如果您在行動裝置上使用浮動操作按鈕，Material Design 建議將 snackbar 直接放置在其上方，如下面的示範所示

常見範例

連續的 Snackbars

此示範展示了如何使用連續動畫顯示多個 Snackbar 而不堆疊它們。

補充元件

notistack

npm downloads

透過命令式 API，notistack 讓您可以垂直堆疊多個 Snackbar，而無需處理它們的開啟和關閉狀態。即使 Material Design 指南不鼓勵這樣做，但它仍然是一種常見模式。

無障礙功能

使用者應該能夠透過按下 Escape 來關閉 Snackbar。如果同時出現多個實例，並且您希望 Escape 只關閉目前開啟的最舊的一個，請在 onClose prop 中呼叫 event.preventDefault。

export default function MyComponent() {
  const [open, setOpen] = React.useState(true);

  return (
    <React.Fragment>
      <Snackbar
        open={open}
        onClose={(event, reason) => {
          // `reason === 'escapeKeyDown'` if `Escape` was pressed
          setOpen(false);
          // call `event.preventDefault` to only close one Snackbar at a time.
        }}
      />
      <Snackbar open={open} onClose={() => setOpen(false)} />
    </React.Fragment>
  );
}

結構

Snackbar 元件由一個根 <div> 組成，該根 <div> 包含內部元素，例如 Snackbar Content 和其他可選元件（例如按鈕或裝飾器）。

<div role="presentation" class="MuiSnackbar-root">
  <div class="MuiPaper-root MuiSnackbarContent-root" role="alert">
    <div class="MuiSnackbarContent-message">
      <!-- Snackbar content goes here -->
    </div>
  </div>
</div>

Snackbar

簡介

用法

基礎

匯入

位置

內容

自動關閉

轉場效果

自訂

與 Alerts 一起使用

與浮動操作按鈕一起使用

常見範例

連續的 Snackbars

補充元件

notistack

無障礙功能

結構

實驗性 API - Toolpad

useNotifications

API