跳转到内容
编辑此页面

Snackbar 消息条

Snackbars provide brief messages about app processes. The component is also known as a toast.

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

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.

频率

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

简单的消息条

一个简单的消息条旨在重现谷歌 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>

定位的消息条

有一些情况会需要消息条的位置更灵活些。

消息的长度

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

<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"
/>

控制滑动的方向

你可以修改 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"
/>

补充项目

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

notistack

评星 npm下载

This example demonstrates how to use notistack. notistack has an imperative API that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to stack them on top of one another (although this is discouraged by the Material Design specification).

可访问性

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

  • By default, the snackbar won't auto-hide. However, if you decide to use the autoHideDuration prop, it's recommended to give the user sufficient time to respond.

API