什么是 @material/snackbar
@material/snackbar 是 Material Design 风格的一个 JavaScript 库，用于快速创建可自定义的提示框。Snackbar 提示框是一个轻量的、信息性的用于向用户显示警告或消息的区域。
Snackbar 和 Web 协作紧密，因此它有很多重要的特征：
- Snackbar 的动画很流畅，在提醒用户的同时，不会干扰用户的使用。
- Snackbar 能够很好的融入现代 Web 应用程序中。
- Snackbar 容易被使用和配置。
安装 @material/snackbar
你可以使用 npm 来安装该包：
--- ------- ------------------
使用 @material/snackbar
要使用 Snackbar，你需要创建一个 div 来存储 Snackbar 元素，这个 div 被称为 Snackbar 容器。 Snackbars 是相对于 Snackbar 容器固定位置的，因此容器需要位于界面上方、下方、左边或右边。
------ ---- ----------------------------------- -------
接下来，在 JavaScript 文件中，你需要引用 Snackbar 包和其它的 Material Web 组件，然后实例化 Snackbar 组件并且设置你希望在 Snackbar 上显示的消息文本。
------ ------------- ---- --------------------- ----- ----------------- - --------------------------------------------------- ----- -------- - --- ------------------------------- ------------------ - --------- ------------------------- - --------- ----------------
Snackbar 的 API
Snackbar 有以下 API：
labelText: Snackbar 消息文本（String）。actionButtonText: Snackbar 上的按钮文本（String）。actionHandler: Snackbar 上的按钮控制的操作（Function）。timeoutMs: Snackbar 控件显示时间（Number）。closeOnEscape: 是否可以通过按 Escape 键关闭 Snackbar（Boolean）。isOpen: Snackbar 控件是否已打开（Boolean）。
labelText
该属性用于将要在 Snackbar 上显示的文本传入到 Snackbar 控件。
------------------ - ---------
actionButtonText
该属性用于设置 Snackbar 上的关闭按钮的文本。
------------------------- - ---------
actionHandler
该属性用于在按钮上添加一个点击操作。调用该方法时不应该显示 Snackbar。
---------------------- - - -- - ---------------------- --
timeoutMs
该属性用于在 Snackbar 显示完毕后，自动关闭 Snackbar 控件。如果该属性设置为 0，则 Snackbar 不会自动关闭。
------------------ - ----- -- ------
closeOnEscape
该属性用于控制 Esc 键能够关闭 Snackbar。
---------------------- - -----
isOpen
该属性表示 Snackbar 控件是否为打开状态。
-----------------------------
示例代码
你可以使用以下示例代码来尝试 @material/snackbar 包：
--------- -----
------
------
----- ----------------
--------------- ------------
----- --------------------------------------------------------------
-----------------
----- ---------------- -----------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
------- --------------
------ ------------- ---- ---------------------
----- ----------------- - ---------------------------------------------------
----- -------- - --- -------------------------------
------------------ - ----- -------- -----
------------------------- - -----
------------------ - -----
---------------------- - -- -- -
-----------------
--
----------------
---------
-------
------
---- -----------------------------------
-------
-------结论
@material/snackbar 包很容易学习和使用，Snackbar 提示框可以很好的融入现代 Web 应用中。此外，Snackbar 组件有丰富的 API 和选项，可以实现各种自定义的操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/200680