MDUI Snackbar
JavaScript 插件
资源

Snackbar

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

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

调用方式

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

使用方法

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

要想创建一个 Snackbar,只需调用方法 mdui.snackbar(params),该方法返回 Snackbar 的实例。

创建 Snackbar 所需的参数:

参数名 类型 默认值 说明
message string Snackbar 的文本,该参数不能为空。
timeout int 4000 在用户没有操作时多长时间自动隐藏,单位(毫秒)。
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 上的按钮时的回调函数。
onClose 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('关闭了');
  }
});
设置文档主题

主题色

主色

强调色