使用 Snackbars 向用户传达低优先级、非中断性的消息。

设计指南

Snackbar 显示一条简洁的消息，并在短暂延迟后清除。它还可以为用户提供选项，例如查看已发布的帖子，但这些选项也应可在 UI 的其他地方获得。

开发指南

用法

要显示一个简单的 snackbar，将消息作为 children prop 传递：

const MySnackbarNotice = () => (
    <Snackbar>Post published successfully.</Snackbar>
);

对于更复杂的标记，您可以传递任何 JSX 元素：

const MySnackbarNotice = () => (
    <Snackbar>
        <p>
            An error occurred: <code>{ errorDetails }</code>.
        </p>
    </Snackbar>
);

Props

以下 props 用于控制组件的显示。

actions: NoticeAction[]

操作对象数组。每个成员对象应包含一个 label 以及 url 链接字符串或 onClick 回调函数。

  • 必需：否
  • 默认值：[]

children: string

通知显示的文本。除非提供 spokenMessage 作为替代消息，否则也用作辅助技术的语音消息。

  • 必需：是

explicitDismiss: boolean

是否需要用户操作来关闭 snackbar。默认情况下，它会在超时后自动关闭，无需用户交互。

  • 必需：否
  • 默认值：false

icon: ReactNode

在 snackbar 中渲染的图标。

  • 必需：否
  • 默认值：null

listRef: RefObject< HTMLDivElement | null >

包含 snackbar 的列表的引用。

  • 必需：否

onDismiss: () => void

当 snackbar 被关闭时执行的回调。它与 onRemove 不同，后者看起来像是一个回调，但实际上是用来从 UI 中移除 snackbar 的函数。

  • 必需：否

onRemove: () => void

关闭通知时调用的函数。

  • 必需：否

politeness: ‘polite’ | ‘assertive’

通知语音消息的礼貌级别。应作为 aria-live 属性值的有效选项之一提供。请注意，此值应被视为建议；辅助技术可能会根据内部启发式方法覆盖它。

'assertive' 值应用于重要且通常具有时间敏感性的信息。它将中断屏幕阅读器当前正在播报的任何内容。

'polite' 值应用于提示性信息。它不应中断屏幕阅读器当前正在播报的内容（“语音队列”）或中断当前任务。

  • 必需：否
  • 默认值：'polite'

spokenMessage: string

用于提供自定义语音消息。

  • 必需：否
  • 默认值：children

相关组件

  • 若要创建需要更高级别注意力的突出消息，请使用 Notice。