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