Material Design 组件图鉴 —— Snackbar&toast

Snackbars provide brief feedback about an operation through a message at the bottom of the screen. Snackbars 为用户的操作提供一个简要的反馈

  • Snackbars 只带一个操作按钮，可以用滑动手势移除，不可以带图标
  • Toasts 不带图标，也不能被操作（iOS 是没有 Toasts 这一说的，规范里说 Toast 只用于移动端）

使用

Snackbar每次只会出现一条，当有两条 Snackbar 要出现时，后一条要等前一条消失后才会出现。

Snackbar 出现在屏幕低端从下至上地滑出，它的高度与 FAB 高度一致，所以它不能遮挡到 FAB。它是低于 dialogs, bottom sheets, and navigation drawers 的。

Snackbar 可以被滑出屏幕以移除，当用户离开当前页面的时候 Snackbar 也会消失。

###尺寸

移动端

  • 单行文字 snackbar 高度：48dp
  • 两行文字 snackbar 高度：80dp
  • 文字：Roboto Regular 14sp
  • 按钮：Roboto Medium 14sp，全大写
  • 默认背景色：#323232 100%

平板/桌面

  • 单行文字 snackbar 高度：48dp
  • 最小长度：288dp
  • 最大长度：568dp
  • 圆角：2dp
  • 两行文字 snackbar 高度：80dp
  • 文字：Roboto Regular 14sp
  • 按钮：Roboto Medium 14sp，全大写
  • 默认背景色：#323232 100%
  • 屏幕左边缘对齐，左下边距：24dp