menu MDUI 文档
color_lens
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down

Snackbar

Snackbar 会在窗口下方出现一个小的弹出框,它们可以在超时或用户触摸屏幕其他地方后自动消失。

屏幕上最多只能同时显示一个 Snackbar,如果在 Snackbar 还未关闭时就打开下一个 Snackbar,则下一个 Snackbar 会被加入队列,等当前 Snackbar 关闭后再打开。

调用方式

调用方法 mdui.snackbar(params) 即可。

使用方法

Snackbar 直接由 JavaScript 调用,无需编写 HTML 布局。

有两种方式可以调用 Snackbar:

  • mdui.snackbar(message, params)
  • mdui.snackbar(params)

两种方式的返回值都是 Snackbar 的实例。

创建 Snackbar 所需的参数:

参数名 类型 默认值 说明
message string Snackbar 的文本。通过 mdui.snackbar(params) 调用时,该参数不能为空。
timeout int 4000 在用户没有操作时多长时间自动隐藏,单位(毫秒)。为 0 时表示不自动关闭。
position string bottom Snackbar 的位置。
  • bottom:下方
  • top:上方
  • left-top:左上角
  • left-bottom:左下角
  • right-top:右上角
  • right-bottom:右下角
buttonText string 按钮的文本。
buttonColor string #90CAF9 按钮的文本颜色,可以是颜色名或颜色值,如 red#ffffffrgba(255, 255, 255, 0.3) 等。
closeOnButtonClick boolean true 点击按钮时是否关闭 Snackbar。
closeOnOutsideClick boolean true 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar。
onClick function 在 Snackbar 上点击的回调函数。
onButtonClick function 点击 Snackbar 上的按钮时的回调函数。
onOpen function Snackbar 开始打开时的回调函数。
onOpened function Snackbar 打开后的回调函数。
onClose function Snackbar 开始关闭时的回调函数。
onClosed function Snackbar 关闭后的回调函数。

Snackbar 实例拥有的方法:

方法名 描述
close 关闭 Snackbar,关闭后 Snackbar 会被销毁。

示例

普通 Snackbar

Example
mdui.snackbar({
  message: 'Message sent'
});

带回调的 Snackbar

Example
mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('点击了 Sanckbar');
  },
  onButtonClick: function(){
    mdui.alert('点击了按钮');
  },
  onClose: function(){
    mdui.alert('关闭了');
  }
});

不同位置的 Snackbar

Example
mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});