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 的位置。
|
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 上的按钮时的回调函数。 | |
onOpen | function | Snackbar 开始打开时的回调函数。 | |
onOpened | function | Snackbar 打开后的回调函数。 | |
onClose | function | Snackbar 开始关闭时的回调函数。 | |
onClosed | function | Snackbar 关闭后的回调函数。 |
Snackbar 实例拥有的方法:
方法名 | 描述 |
---|---|
close | 关闭 Snackbar,关闭后 Snackbar 会被销毁。 |
mdui.snackbar({
message: 'Archived',
buttonText: 'undo',
onClick: function(){
mdui.alert('点击了 Sanckbar');
},
onButtonClick: function(){
mdui.alert('点击了按钮');
},
onClose: function(){
mdui.alert('关闭了');
}
});
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',
});