Material Design 是谷歌推出的一套用户界面设计规范，在多个平台上被广泛使用。其中，Snackbar 是一个常用的设计元素，用于向用户显示简短、即时的消息。
Snackbar 的出现是为了替代传统的 Toast 弹出式消息，它具有更灵活的表现形式和更好的视觉效果。在前端开发中，我们可以使用 Material Design 提供的 Snackbar 组件来实现这个功能。
Snackbar 的基本用法
Snackbar 的基本用法非常简单，只需要将消息文本作为参数传入即可。
-- -------------------- ---- -------
------- ------------------ -----------------
--------
----- -------- - ------------------------------------
---------------------------------- -------- -- -
----- -------- - --- ------------------------------------------------------------------
----------------------- ------ ------------
---
---------
---- ---------------------
---- ------------------------------
---- ---------------------------
-------------
-------------------
----- --------
------
---- ------------------------------
------- ------------- ----------------- ---------------------------------
------- ------------- ----------------- ----------------------------------
------
------
------在这个示例中，我们先定义了一个按钮，并使用 JavaScript 监听了它的点击事件。在事件处理函数内，创建了一个 Snackbar 的实例，并将消息文本作为参数传入 show 方法中。
此外，我们还需要在页面中添加 Snackbar 元素的 HTML 代码，用于实际显示消息。这个 HTML 代码比较复杂，但我们只需要复制粘贴即可。
这个示例会在点击按钮时弹出一个消息框，显示一条“Hello Snackbar”的消息。消息框中还有两个按钮，分别对应“确定”和“关闭”两个操作。
Snackbar 的高级用法
除了基本用法外，Snackbar 还支持许多高级用法，例如更改显示时长、添加操作按钮、设置颜色等等。下面是一个使用这些高级特性的示例代码。
-- -------------------- ---- -------
------- ------------------ -----------------
--------
----- -------- - ------------------------------------
---------------------------------- -------- -- -
----- -------- - --- ------------------------------------------------------------------
------------------ - -----
------------------------- - -----
---------------------- - ---------- -
----------- -- -----
--
---------------
-------- -----------
----------- -------
---
---
---------
---- --------------------
---------------------------------
---- ------------------------------
---- ---------------------------
-------------
-------------------
--------
------
---- ------------------------------
------- ------------- ----------------- -----------------------------------
------- ------------- ----------------- ----------------------------------
------
------
------这个示例中，我们在创建 Snackbar 的实例后，设置了三个属性：
- timeoutMs：显示时长，单位为毫秒。
- actionButtonText：操作按钮上的文本。
- actionHandler：操作按钮的点击事件处理函数。
在 show 方法中，我们还传入了一个参数对象，包含了以下属性：
- message：消息文本。
- actionText：操作按钮上的文本。
此外，我们还修改了 Snackbar 元素的 HTML 代码中的一个属性，以便自动初始化 Snackbar 组件。
这个示例会在点击按钮时弹出一个消息框，显示一条“这是一条重要消息”的消息。消息框中有两个按钮，一个是“查看详情”，另一个是“关闭”。这个消息框会在 3 秒后自动关闭，如果点击“查看详情”按钮，则会弹出一个对话框。
注意事项
在使用 Snackbar 时，需要注意以下几点：
- 保持使用最新版本的 Material Design 组件库，以确保 Snackbar 引入的是最新的代码。
- 不要滥用 Snackbar，仅在需要很快提示用户的时候使用。过多的提示会影响用户体验。
- Snackbar 应该显示在屏幕的底部，不应覆盖页面的核心内容。
- Snackbar 应该有合适的显示时长，不应太短或太长。
- 需要给用户足够的时间阅读和理解消息，不要在用户没有准备好时立刻关闭 Snackbar。
- Snackbar 中的操作按钮应该简单易懂，不宜使用过于复杂的词汇或深度操作。
总结
Snackbar 是 Material Design 中的一个重要设计元素，可以用于向用户快速显示消息。在前端开发中，我们可以使用 Material Design 提供的 Snackbar 组件来实现这个功能，并使用高级特性来增强用户体验。但在使用 Snackbar 时，需要注意一些细节，以确保用户体验和设计效果的最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0f09148841e9894d2ee75