Material Design 是 Google 推出的一套 UI 设计语言，旨在为 Android 设备和 Web 应用程序提供一致的视觉和交互体验。Snackbar 是 Material Design 中的一种界面组件，用于向用户显示一条短暂的消息，通常用于提示用户某些操作的结果或提醒用户需要注意的事项。
本文将介绍 Material Design 中 Snackbar 的基本使用方法，包括创建 Snackbar、设置 Snackbar 的样式和动画、以及与其他组件的配合使用等。
创建 Snackbar
要创建一个 Snackbar，首先需要获取到一个 Snackbar 实例。可以通过以下方式创建一个 Snackbar：
----- -------- - --- ------------------------------------------------------------------
其中，mdc.snackbar.MDCSnackbar 是 Snackbar 的构造函数，document.querySelector('.mdc-snackbar') 是一个 CSS 选择器，用于获取 Snackbar 的 HTML 元素。在创建 Snackbar 实例后，可以使用 snackbar.show() 方法显示 Snackbar。
---------------
-------- ------- -----------
-------- ----- -- - ------
----------- -----
-------------- -- -- -
--------------------- ------ -----------
-
---在调用 show() 方法时，可以传入一个包含以下属性的对象：
message：Snackbar 显示的文本内容。timeout：Snackbar 显示的时间，单位为毫秒。如果不设置或设置为 0，则 Snackbar 不会自动隐藏。actionText：Snackbar 上的操作按钮文本。actionHandler：Snackbar 上的操作按钮点击事件处理函数。
设置 Snackbar 样式和动画
Material Design 中的 Snackbar 具有一些默认的样式和动画，但也可以通过 CSS 和 JavaScript 自定义样式和动画效果。
自定义样式
Snackbar 的 HTML 结构如下所示：
---- ---------------------
---- ------------------------------
---- ----------------------------------
---- ------------------------------
------- ------------- ----------------- -------------------------------
------
------
------可以通过修改这些 HTML 元素的样式来自定义 Snackbar 的外观。例如，可以修改 .mdc-snackbar__surface 的背景色、.mdc-snackbar__label 的字体大小和颜色等。
---------------------- - ----------------- -------- - -------------------- - ---------- ----- ------ ----- -
自定义动画
Snackbar 的出现和隐藏动画分别由 .mdc-snackbar--opening 和 .mdc-snackbar--closing 类控制。可以通过 CSS 或 JavaScript 修改这些类的动画效果。
例如，可以通过 CSS 修改 Snackbar 的出现动画为淡入效果：
---------------------- -
---------- ------- ---- ---------
-
---------- ------- -
---- -
-------- --
---------- -----------------
-
-- -
-------- --
---------- --------------
-
-与其他组件的配合使用
Snackbar 可以与其他 Material Design 组件配合使用，例如 Button、Text Field 等。通常情况下，当用户与这些组件交互时，会触发某些事件，Snackbar 可以用来提示用户这些事件的结果或提醒用户需要注意的事项。
例如，当用户提交一个表单时，可以在表单下方显示一个 Snackbar，提示用户提交成功：
------
---- -----------------------
------ ----------- ------------------------------
------ ---------------------------------------
------
------- ------------- ----------------- -----------------------------------
-------
---- ---------------------
---- ------------------------------
---- ----------------------------------
---- ------------------------------
------- ------------- ----------------- -------------------------------
------
------
------
--------
----- ---- - -------------------------------
----- -------- - --- ------------------------------------------------------------------
------------------------------- ------- -- -
-----------------------
---------------
-------- ----- --------- ---------------
-------- ----
---
---
---------在上面的示例中，当用户提交表单时，会触发 submit 事件，Snackbar 会显示一条提示用户提交成功的消息。
总结
本文介绍了 Material Design 中 Snackbar 的基本使用方法，包括创建 Snackbar、设置 Snackbar 的样式和动画、以及与其他组件的配合使用等。通过学习本文，读者可以了解到如何在 Web 应用程序中使用 Snackbar，提高用户体验和交互效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657f4c79d2f5e1655da2957c