Material Design Lite组件之提醒框

1.用法介绍

为一个div容器添加mdl-js-snackbar和mdl-snackbar类设置为提醒框组件；

在该容器内部添加一个类名mdl-snackbar__text的容器用于存放消息内容，并将其消息内容设置为空，用于弹出的时候添加内容；

下面在添加一个button按钮，类名设置为mdl-snackbar__action，并设置内容为空，也不添加事件；

在JavaScript代码中配置数据选项和调用showSnackbar方法弹出弹窗。

2.配置选项

类

类名	效果	其他
mdl-snackbar	定义容易为MDL弹出框组件	必需
mdl-snackbar__text	设置弹出框内容的样式	必需
mdl-snackbar__action	定义触发弹窗的方式	必需
mdl-snackbar--active	将弹窗标记为触发状态当其显示的时候	触发状态必需类

数据对象

属性	效果	备注	类型
message	需要显示的信息	必需	String
timeout	弹窗显示的时间（毫秒）	默认2750毫秒	Integer
actionHandler	当弹窗按钮点击时执行的函数	可选	Function
actionText	弹窗按钮内容	如果弹窗设置按钮则必需	String

3.应用举例

3.1.消息弹窗

<button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button>
<div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  window['counter'] = 0;
  var snackbarContainer = document.querySelector('#demo-toast-example');
  var showToastButton = document.querySelector('#demo-show-toast');
  showToastButton.addEventListener('click', function() {
    'use strict';
    var data = {message: 'Example Message # ' + ++counter};
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>

3.2.带操作按钮的弹窗

<button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button>
<div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
<script>
(function() {
  'use strict';
  var snackbarContainer = document.querySelector('#demo-snackbar-example');
  var showSnackbarButton = document.querySelector('#demo-show-snackbar');
  var handler = function(event) {
    showSnackbarButton.style.backgroundColor = '';
  };
  showSnackbarButton.addEventListener('click', function() {
    'use strict';
    showSnackbarButton.style.backgroundColor = '#' +
        Math.floor(Math.random() * 0xFFFFFF).toString(16);
    var data = {
      message: 'Button color changed.',
      timeout: 2000,
      actionHandler: handler,
      actionText: 'Undo'
    };
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</script>