什么是 @materialr/snackbar?
@materialr/snackbar是一个npm软件包，提供了一个Material Design规范的消息提示组件。Snackbar是一个轻量级的消息通知组件，它可以在网页中以非常直观的方式弹出消息通知，让用户更容易注意到页面上发生的相关事件。
如何使用 @materialr/snackbar?
使用@materialr/snackbar非常简单，只需在项目中下载并引用该npm包即可。下面我们来一步步实现如何在项目中使用@materialr/snackbar。
第一步：引入 @materialr/snackbar 库
可以使用npm或yarn安装@materialr/snackbar:
npm install @materialr/snackbar --save
或
yarn add @materialr/snackbar
第二步：创建 Snackbar 实例
我们需要通过createSnackbars方法创建 Snackbar 的实例，示例代码如下：
import { createSnackbars } from '@materialr/snackbar';
const snackbar = createSnackbars();第三步：激活 Snackbar
使用snackbar.activate方法来激活 Snackbar，该方法需要接收一个SnackbarOptions对象作为参数，告诉Snackbar应该如何显示。示例代码如下：
-- -------------------- ---- -------
------ - --------------- - ---- ----------------------
----- -------- - ------------------
------------------------------------------------------------------------- -- -- -
-------------------
--- -------------------
----- ----- -- -- ------- -------- ----------
----------- ----------
--------- -----
--------- -- -- --------------------- ------ --- ---------
---
---在上面的代码中，我们将Snackbar的实例赋值给变量snackbar。然后，我们通过用addEventListener将activate方法与一个按钮关联起来，以便在单击按钮时激活 Snackbar。当Snackbar被激活时，它将显示我们在SnackbarOptions对象中指定的文本和按钮，并设置Snackbar的持续时间和回调函数。
SnackbarOptions参数说明
在上述示例代码中，我们使用SnackbarOptions对象来定义Snackbar的显示方式。下面是参数说明：
id:字符串，Snackbar的id，用于区分不同的Snackbar。text:字符串，显示在Snackbar中的消息文本。buttonText:字符串，显示在Snackbar上按钮上的文本。duration:数字，消息在屏幕上停留的时间，单位为毫秒。onAction:函数，当Snackbar上的按钮被单击时触发的回调函数。
结论
现在你已经学会了如何在你的项目中使用@materialr/snackbar，通过Snackbar，你可以很容易地在你的网页中添加消息通知，更加人性化的展示重要的提示和信息。希望这篇文章能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446de