在前端开发中，提示用户信息是常见的需求。Material Design 提供了 Snackbar 组件，可以方便地在页面底部弹出提示信息。本文将介绍如何使用 Snackbar 实现多种提示样式，包括文本提示、带操作按钮的提示和自定义提示样式。
基础使用
Material Design 中的 Snackbar 组件在页面底部（或者到父元素的底部）弹出一条信息，一段时间后自动消失。使用 Snackbar 很简单，只需要引入相应的 CSS 和 JS 文件，并调用 Snackbar() 函数即可：
-- -------------------- ---- -------
----- ---------------- ----------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- ----------------------------- -----------------
--------
-------- -------------- -
---------------
-------- ------- ----------
---
-
---------上面的代码中，使用了 mdui.snackbar() 函数来创建 Snackbar，message 参数指定要显示的消息内容。
带操作按钮的提示
有时候我们需要在提示信息中加入一些操作按钮，比如“撤销”、“前往链接”等，这时候可以使用 Snackbar 的 actionText 和 action 参数实现。
-- -------------------- ---- -------
------- ----------------------------- -----------------
--------
-------- -------------- -
---------------
-------- ---- --- ---- --- ---- -- ------ ---- -------
----------- -------
------- ---------- -
----------------- ---------
-
---
-
---------上面的代码中，actionText 参数指定操作按钮的文本，action 参数指定按钮被点击时的回调函数。
自定义提示样式
如果默认的提示样式不能满足需求，可以使用 Snackbar 的自定义样式功能来实现。
-- -------------------- ---- -------
------- ----------------------------- -----------------
-------
--------------------- -
----------------- --------
------ -----
-
--------------------- ---------------------- -
------------- ----- -- --------- --
-
--------------------- --------- -
------ -----
------------- -----
-
--------
--------
-------- -------------- -
---------------
-------- ------ -----------
----------- --------
------------ -------
--------- -------------
---
-
---------上面的代码中，通过 cssClass 参数指定自定义的样式类名，然后在 CSS 中定义样式即可。同时，也可以使用 buttonText 和 buttonColor 参数设置操作按钮的文本和颜色。
总结
本文介绍了如何使用 Material Design 中的 Snackbar 实现多种提示样式。通过使用 message、actionText、action 和 cssClass 参数，可以实现不同类型的提示样式。Snackbar 提供了一种简单、美观且易于使用的方式来提示用户信息，可以满足大部分前端开发中的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fa14295b1f8cacd729d26