codecamp

Snackbar

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

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

调用方式

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


相关资料

Material Design Snackbars & toasts 设计规范


使用方法

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

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

创建 Snackbar 所需的参数:

 参数名 类型 默认值 说明
 message string  Snackbar 的文本,该参数不能为空。
 timeout int 4000 在用户没有操作时多长时间自动隐藏,单位(毫秒)。
 buttonText string  按钮的文本。
 buttonColor string #90CAF9 按钮的文本颜色,可以是颜色名或颜色值,如 red、#ffffff、rgba(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 会被销毁。


示例

www.mdui.org - Snackbar - 示例


在线运行

在线运行,带回调的例子


工具提示
表格
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }