跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post →

编辑此页面

Snackbar 消息条

消息条组件提供了关于应用流程的简短信息。 该组件也被称为 toast。

消息条将应用程序已执行或即将执行的进程通知用户。 它们会从屏幕底部短暂地出现。 它们不应中断用户体验，也不要求任何用户的操作来关闭。

消息条包含了一行直接与所执行操作相关的文本。 它们可能包含一些文本操作，但并不会展示图标。 您也可以用他们展示通知。

频率

我们规定一次只能显示一个消息条。

简单的消息条

一个简单的消息条旨在重现谷歌 Keep 消息条的行为。

自定义的消息条

你可以参考以下一些例子来自定义组件。 您可以在重写文档页中了解有关此内容的更多信息。

<Button variant="outlined" onClick={handleClick}>
  Open success snackbar
</Button>
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
  <Alert onClose={handleClose} severity="success">
    This is a success message!
  </Alert>
</Snackbar>
<Alert severity="error">This is an error message!</Alert>
<Alert severity="warning">This is a warning message!</Alert>
<Alert severity="info">This is an information message!</Alert>
<Alert severity="success">This is a success message!</Alert>

定位的消息条

在宽大的布局中，如果消息条始终放在屏幕底部的同一位置，那么可以左对齐或中间对齐，但在某些情况下，消息条的位置可能需要更加灵活。 通过指定 anchorOrigin 的属性，您可以控制消息条的位置。

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

消息的长度

有些消息条会有不同的长度。

<SnackbarContent message="I love snacks." action={action} />
<SnackbarContent
  message={
    'I love candy. I love cookies. I love cupcakes. \
    I love cheesecake. I love chocolate.'
  }
/>
<SnackbarContent message="I love candy. I love cookies. I love cupcakes." action={action} />
<SnackbarContent
  message={
    'I love candy. I love cookies. I love cupcakes. \
    I love cheesecake. I love chocolate.'
  }
  action={action}
/>

过渡动画

连续的消息条

当需要显示多个消息条的时候，一次应该只显示一个。

消息条（Snackbars）和悬浮按钮（FABs）

消息条应当显示在悬浮按钮的上方（这是在移动设备上）。

更改过渡动画

Grow 是默认的过渡动画，但你可以使用不同的过渡动画。

<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}
  TransitionComponent={state.Transition}
  message="I love snacks"
  key={state.Transition.name}
/>

控制滑动的方向

你可以修改 Slide 过渡的方向 。

<Button onClick={handleClick(TransitionLeft)}>Right</Button>
<Button onClick={handleClick(TransitionUp)}>Up</Button>
<Button onClick={handleClick(TransitionRight)}>Left</Button>
<Button onClick={handleClick(TransitionDown)}>Down</Button>
<Snackbar
  open={open}
  onClose={handleClose}
  TransitionComponent={transition}
  message="I love snacks"
  key={transition ? transition.name : ''}
/>

补充项目

对于更高级的用例，您可以利用：

notistack

评星 npm下载

以下例子演示了如何使用 notistack。 notistack 有一个 imperative API 可以轻松地显示一串消息条，且无需处理其打开/关闭状态。 您也可以把它们 堆叠 在一起（尽管 Material Design 规范不鼓励这样做）。

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)

  • 默认情况下，消息条不会自动隐藏。 但是，如果您决定使用 autoHideDuration 属性，我们建议给用户提供 足够的时间 来响应。

API