menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

Snackbar

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

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

调用方式

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

使用方法

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

有两种方式可以调用 Snackbar:

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

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

创建 Snackbar 所需的参数:

参数名类型默认值说明
messagestring Snackbar 的文本。通过 mdui.snackbar(params) 调用时,该参数不能为空。
timeoutint4000 在用户没有操作时多长时间自动隐藏,单位(毫秒)。为 0 时表示不自动关闭。
positionstringbottom Snackbar 的位置。
  • bottom:下方
  • top:上方
  • left-top:左上角
  • left-bottom:左下角
  • right-top:右上角
  • right-bottom:右下角
buttonTextstring按钮的文本。
buttonColorstring#90CAF9 按钮的文本颜色,可以是颜色名或颜色值,如 red#ffffffrgba(255, 255, 255, 0.3) 等。
closeOnButtonClickbooleantrue点击按钮时是否关闭 Snackbar。
closeOnOutsideClickbooleantrue点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar。
onClickfunction在 Snackbar 上点击的回调函数。
onButtonClickfunction点击 Snackbar 上的按钮时的回调函数。
onOpenfunctionSnackbar 开始打开时的回调函数。
onOpenedfunctionSnackbar 打开后的回调函数。
onClosefunctionSnackbar 开始关闭时的回调函数。
onClosedfunctionSnackbar 关闭后的回调函数。

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',
});