Material Design Lite组件之提醒框

﹏ヽ暗。殇╰゛Y 2022-05-23 02:14 178阅读 0赞

#### 1.用法介绍 ####

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

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

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

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

#### 2.配置选项 ####

类

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

数据对象

<table style="color:rgb(117,117,117);font-family:Roboto, Helvetica, Arial, sans-serif;font-size:14px;background-color:rgb(250,250,250);"> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>效果</th> 
   <th>备注</th> 
   <th>类型</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>message</td> 
   <td>需要显示的信息</td> 
   <td>必需</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>timeout</td> 
   <td>弹窗显示的时间（毫秒）</td> 
   <td>默认2750毫秒</td> 
   <td>Integer</td> 
  </tr> 
  <tr> 
   <td>actionHandler</td> 
   <td>当弹窗按钮点击时执行的函数</td> 
   <td>可选</td> 
   <td>Function</td> 
  </tr> 
  <tr> 
   <td>actionText</td> 
   <td>弹窗按钮内容</td> 
   <td>如果弹窗设置按钮则必需</td> 
   <td>String</td> 
  </tr> 
 </tbody> 
</table>

#### 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>

![20180531112558789][]

##### 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>

![20180531112659229][]

[20180531112558789]: /images/20220523/b77f5745f04f4a2ea558bca734e24e04.png
[20180531112659229]: /images/20220523/1954aacd78304f7fb57cdfdd07bd5b91.png