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 组件

自定义

过渡效果

您可以使用渲染属性子组件和过渡组件来动画化 Snackbar 的打开和关闭状态，只要该组件满足以下条件

• 是 snackbar 的直接子代
• 具有 in 属性——这对应于打开状态
• 将 exited 属性传递给 Snackbar
• 在进入过渡开始时调用 onEnter 回调属性——将 exited 设置为 false
• 在退出过渡完成时调用 onExited 回调属性——将 exited 设置为 true

这两个回调允许 Snackbar 在关闭时卸载子内容，并保持完全过渡。这仅适用于您使用内部使用 react-transition-group 库的过渡组件的情况。

下面的演示展示了如何创建具有自定义过渡效果的 Snackbar