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