Snackbar

使用方法

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

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

创建 Snackbar 所需的参数：

参数名	类型	默认值	说明
`message`	`string`		Snackbar 的文本，该参数不能为空。
`timeout`	`int`	`4000`	在用户没有操作时多长时间自动隐藏，单位（毫秒）。
`position`	`string`	`bottom`	Snackbar 的位置。 `bottom`：下方 `top`：上方 `left-top`：左上角 `left-bottom`：左下角 `right-top`：右上角 `right-bottom`：右下角
`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 会被销毁。

示例

普通 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

调用方式

相关阅读

使用方法

示例

普通 Snackbar

带回调的 Snackbar

不同位置的 Snackbar