Material Design 中 SnackBar 的实现方法及注意事项

阅读时长 6 分钟读完

Material Design 中 SnackBar 的实现方法及注意事项

介绍

SnackBar 是一种 Material Design 风格的 Alert（提示）控件，它显示在屏幕的底部，并提供简短的信息和操作建议。SnackBar 的出现时间短暂，然后自动消失（也可以手动关闭），并且不会打断用户的操作，因此它非常适合用于用户提醒和轻量级的反馈。

在本文中，我们将探讨 Material Design 中 SnackBar 的实现方法，并提供一些注意事项和学习指导，帮助你更好地应用它到你的前端开发项目中。

实现方法

在实现 SnackBar 前，我们需要先引入 Material Design 相关的样式和 JavaScript 库。在这里我使用的是 Google 提供的 Material Design Lite 库，你也可以使用其他类库或者自行编写。

引入样式和 JavaScript

首先，我们需要在页面中引入 Material Design Lite 相关的 CSS 样式和 JavaScript 文件。这里我假设你已经下载并将这些文件添加到你的项目中，如果没有，请访问 https://getmdl.io/ 了解更多信息。

<link /> <script></script>

添加 HTML 结构

在页面的 body 中添加一个 div 元素，这个 div 元素将用作 SnackBar 的容器。在这个 div 中添加一个 button 元素，点击这个 button 会触发 SnackBar 的显示。

<button>Click to show SnackBar</button>

注意：在这里，我们使用 Material Design Lite 库提供的样式类 mdl-button 和 mdl-js-button 和 mdl-button--raised，这些样式类将给 button 元素添加 Material Design 风格的按钮样式和交互特效。如果你不需要这些样式，请自行修改按钮的样式。

添加 JavaScript 代码

现在，我们已经在页面中添加了所需的 HTML 结构，我们将完善 SnackBar 的功能。在下面的 JavaScript 代码中，我将使用 Material Design Lite 库中的 snackbar 组件来创建 SnackBar，并在点击 button 时触发它的显示。

var snackbarContainer = document.querySelector('#snackbar-container'); var showSnackbarButton = document.querySelector('#snackbar-button');

showSnackbarButton.addEventListener('click', function() { var data = { message: 'This is a SnackBar', }; snackbarContainer.MaterialSnackbar.showSnackbar(data); });

注意：在代码中，我们使用 document.querySelector() 获取 SnackBar 的容器 (#snackbar-container) 和显示 SnackBar 的按钮 (#snackbar-button)，然后使用 addEventListener() 方法来监听 button 的 click 事件，在事件回调函数中创建一个 data 对象，其中 message 属性用于指定 SnackBar 的内容。最后，我们调用 snackbarContainer.MaterialSnackbar.showSnackbar() 方法来显示 SnackBar。

完整示例代码

下面是实现 SnackBar 的完整示例代码，你可以将它直接复制到你的项目中，修改样式和内容来满足你的需求。

<html> <head> <meta /> <title>Material Design SnackBar Demo</title> <link /> </head> <body>
<button>Click to show SnackBar</button>
<script></script> <script> var snackbarContainer = document.querySelector('#snackbar-container'); var showSnackbarButton = document.querySelector('#snackbar-button'); <pre class="prettyprint login undefined">showSnackbarButton.addEventListener(&apos;click&apos;, function() { var data = { message: &apos;This is a SnackBar&apos;, }; snackbarContainer.MaterialSnackbar.showSnackbar(data); });</pre><p> </script> </body> </html>

注意事项

虽然 SnackBar 是一个非常实用的提示控件，但在应用它时，我们也要注意一些细节和注意事项，以确保它的使用效果最佳。

  1. 不应频繁出现

SnackBar 被设计为一个轻量级的提示控件，因此过于频繁的使用它可能会分散用户的注意力。我们应该选择在需要引起用户注意时使用它，而不是在每一个操作都使用它。

  1. 应该提供操作建议

提示信息应该包含一些实用的操作建议，以帮助用户快速解决问题。例如，如果 SnackBar 显示了一个错误信息，它应该包含一些提示用户如何解决问题的建议或者指向更详细的帮助文档。

  1. 明确 SnackBar 的出现条件

如果 SnackBar 显示的条件不清晰，可能会让用户感到困惑或者疑惑。我们应该选择明确的条件来触发 SnackBar，例如提交表单时显示一个确认消息。

  1. 考虑不同屏幕大小的显示效果

SnackBar 的显示位置和大小应该适应不同屏幕尺寸的设备，以确保在不同设备上的显示效果一致。

结论

通过本文的介绍和示例代码，我们了解了 Material Design 中 SnackBar 的实现方法和注意事项，并发现它是一个非常实用和有用的前端控件。我们应该根据项目需要，灵活使用它，提高用户体验和操作效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670d09b95f551281025c4383

纠错
反馈
相关推荐
精选内容