Snackbar 是一种轻量级的用户提示控件，在 Android Material Design 中扮演着非常重要的角色。Snackbar 能够在应用程序底部显示简短消息，以轻松向用户提供有关应用程序的状态和反馈。这是一种更好的替代方案，例如弹出框和 Toast 消息，因为它不会打断用户的工作流程。本文将介绍如何使用 Material Design 风格的 Snackbar 添加按钮。
准备工作
在开始之前，您需要了解以下技术：
- HTML
- CSS
- JavaScript
- Angular 或者 React
使用 Material Design 风格的 Snackbar
Snackbar 是建立在 Material Design 规范之上的。在 Angular 和 React 中，Snackbar 已经被设计为成为一个可复用的组件库。使用 Material Design 风格的 Snackbar 添加按钮非常简单。
使用 Material Design 风格的 Snackbar 组件，需要在您的应用程序中引入它，并按以下方式添加 CSS 样式：
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
或者
@import "~@material-ui/core/styles.css";
这样做可以确保我们使用的是 Material Design 风格的 Snackbar。接下来，我们将演示如何在 Angular 和 React 中使用 Material Design 风格的 Snackbar 添加按钮。
在 Angular 中使用 Material Design 风格的 Snackbar
在 Angular 中，可以使用 MatSnackBar 服务来显示 Snackbar。在我们的 Component 文件中，需要在构造函数中注入 MatSnackBar 服务。然后，我们可以调用 open 方法并指定消息以及按钮文本和行动。
<button (click)="openSnackbar()">Open Snackbar</button>
-- -------------------- ---- -------
------ - ----------- - ---- ------------------------------
------ ----- ------------ -
------------------- --------- ------------ --
-------------- -
-------------------------- ----------- --------- -
--------- -----
---
-
-在这个例子中，我们使用 duration 属性来设置 Snackbar 显示的时间。如果不设置，Snackbar 默认的显示时间为 5 秒。
如果需要在按钮上添加更多的行动，您可以扩展 MatSnackBarAction 类并传递给 open 方法的第三个参数。
-- -------------------- ---- -------
------ - ------------ ------------------ -------------- - ---- ------------------------------
------ - ---------- ------ - ---- ---------------
------ ----- ------------ -
------------------- --------- ------------ --
------------------------ -
----- --------------- ----------------- - -
--------- -----
------------------- ---------
----------------- -----
--
----- ------------ ---------------------------- - -------------------------------------------------- -
------------------
----- - ----- -------- ---------- --
----------- --------------------
---
----------------------------
------------- -- -
---------------- -------- --- -------------
---
----------------------
------------- -- -
---------------- -------- ------ --- -------------
---
-
-在这个例子中，我们将实现一个自定义 Snackbar 行动并将其传递给 open 方法的第三个参数。我们还引入了 MatSnackBarConfig 和 MatSnackBarRef。MatSnackBarConfig 可以用于配置 Snackbar 的各个属性，例如显示时间、位置等。同时，我们使用了 MatSnackBarRef 来获取 Snackbar 的引用，以便在 Snackbar 关闭时执行一些操作。
在 React 中使用 Material Design 风格的 Snackbar
在 React 中，可以使用 Snackbar 组件来显示 Snackbar。在我们的 React Component 中，我们需要在 JSX code 中导入 Snackbar 和它的必要属性。然后，我们可以创建 Snackbar 的实例，并使用相应的属性来指定消息、行动和显示时长。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ---------------------------
------ -------- ---- -----------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- ------
--
-
----------- - ------- ------- -- -
-- ------- --- ------------ -
-------
-
--------------- ----- ----- ---
--
---------- - -- -- -
--------------- ----- ---- ---
--
-------- -
------ -
-----
------- ------------------------------ -----------------
---------
---------------
--------- ---------
----------- -------
--
----------------------
-----------------------
--------------------------
--------------- ----------
--------
----------------
------- ----------------- ------------ ---------------------------
-----
---------
-----------------
-
--
------
--
-
-
------ ------- ----在这个例子中，我们使用 Snackbar 组件，并将 anchorOrigin 属性设置为通知位置。我们还引入了两个处理程序：handleOpen 和 handleClose。当用户单击按钮时，handleOpen 会将 Snackbar 设为打开状态，Snackbar 会打开并显示内容，并在指定的时间后自动关闭。当用户单击 Snackbar 上的行动按钮时，handleClose 会将 Snackbar 设为关闭状态。
总结
这篇文章介绍了如何使用 Material Design 风格的 Snackbar 添加按钮。我们了解了 Snackbar 的原理和优点，并演示了如何在 Angular 和 React 中使用它来改善用户体验。通过本文，读者将了解到使用 Material Design 风格的 Snackbar 组件，以及如何使用自定义行动来增强它的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498f4ba48841e98945e36e7