在移动应用和 Web 应用的开发中，提示信息是一个非常基础且常见的需求。我们需要通过界面上的一些元素来提示用户，例如操作成功、出错、网络错误等等。
而在 Material Design 中，SnackBar 就是一款非常适合用来实现这个需求的组件。它能够提供类似弹出式的通知，可以用来展示短暂的消息、操作结果等提示内容。本文将介绍 Material Design 中使用 Snackbar 实现提示信息的基本方法和技巧，以及一些比较有用的示例代码。
基本使用方法
要在应用中使用 Snackbar，首先需要在 HTML 中导入 Snackbar 相关的资源：
<!-- 引入 Material Icons 字体 --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- 引入 Material Design 样式 --> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <!-- 引入 Material Design JavaScript 库 --> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
其中的 Material Icons 是 Google 官方提供的字体图标，包含了许多常用的图标，可以在应用中很方便地使用。
接着，在需要显示提示信息的位置调用 Snackbar 组件：
-- -------------------- ---- ------- -- ---- --- ---- -------- ---- --- ------ - ------------------------------- -- ---- -------- ----- ---- -- --- -------- - ------------------------------ ------------------------------------------ -------------------------------------- ------ --------------------------------------- --- -------------------- - -------- ----------------------------- -----------------------------------------
上面的代码中，首先获取了一个 DOM 元素作为 Snackbar 的父容器，这个父容器可以是任何合法的 DOM 元素，例如 body、div 等等。接着，创建了一个 Snackbar 组件，设置了持续时间和最大允许的 toast 数量，并设置了提示内容为“操作成功！”。最后，将 Snackbar 组件添加到父容器中，并调用 showSnackbar 方法展示信息即可。
进一步示例
除了基本的使用方法之外，Snackbar 还提供了其他一些有用的属性和方法，让我们更灵活地控制展示信息的方式。
actionLabel 和 actionHandler
我们可以通过设置 actionLabel 和 actionHandler 属性为 Snackbar 添加一个按钮，当用户点击按钮时可以触发特定的操作：
-- -------------------- ---- ------- --- -------- - ------------------------------ ------------------------------------------ -------------------------------------- ------ --------------------------------------- --- ------------------------------------ ------ -------------------------------------------- --------- -------------------- - -------- ----------------------------- -------- ------- - ----------------------------------------- -
上面的代码中，我们添加了一个 "关闭" 的按钮，并且将 actionHandler 属性设置为 close 函数，这个函数会在用户点击按钮时触发。我们同样需要在页面中添加相关的样式：
.mdl-button--snackbar { color: #ffffff; font-weight: 500; }持续性提示信息
默认情况下，Snackbar 是一款短暂的提示信息，只在指定的持续时间内展示一次。但是我们也可以通过设置 Snackbar 的消失时机来让它变成持续性提示信息：
var snackbar = document.createElement('div'); snackbar.classList.add('mdl-js-snackbar'); snackbar.setAttribute('data-duration', 'Infinity'); snackbar.setAttribute('data-max-toast', 1); snackbar.setAttribute('data-action', '关闭'); snackbar.setAttribute('data-action-handler', 'close'); snackbar.textContent = '操作成功！'; parent.appendChild(snackbar);上面的代码中，我们将 Snackbar 的持续时间设置为 Infinity，这样它就会一直展示在页面上，直到我们手动关闭它。
带图标的提示信息
我们还可以为 Snackbar 添加图片等其他内容来丰富提示信息的内容：
-- -------------------- ---- ------- --- -------- - ------------------------------ ------------------------------------------ -------------------------------------- ------ --------------------------------------- --- ------------------------------------ ------ -------------------------------------------- --------- --- ---- - - -------- -------- -------- ----- -------------- ------ ----------- ---- -- --- --------- - ------------------------------ --------------------------------------------------- ------------------- - - ---- --------------------------- -- ------------------------------- --------------- ------ ------- ----------------- ------------------- ---------------------------- ------------- ----------------------- -------------------------------- ------------------ --------- -- ------------------------------ -------- ------- - ------------------------------------- -
上面的代码中，我们手动组装了一份 HTML 内容作为提示信息，并且在其中添加了一个图片。这个图片可以通过 Material Icons 来获取，这里使用的是“done”图标。
总结
通过以上的介绍，我们了解了 Material Design 中如何使用 Snackbar 实现提示信息的需求。除了基本的用法之外，Snackbar 还提供了很多高级功能，可以更加丰富和灵活地控制提示信息的展示方式。希望这篇文章可以帮助您更好地掌握和使用这款组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cdf67db5eee0b5255ea885