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 属性来控制 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 属性在设定的时间段（以毫秒为单位）后自动触发 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 属性将 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 属性中调用 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