什么是 @material/snackbar
@material/snackbar 是 Material Design 风格的一个 JavaScript 库，用于快速创建可自定义的提示框。Snackbar 提示框是一个轻量的、信息性的用于向用户显示警告或消息的区域。
Snackbar 和 Web 协作紧密，因此它有很多重要的特征：
- Snackbar 的动画很流畅，在提醒用户的同时，不会干扰用户的使用。
- Snackbar 能够很好的融入现代 Web 应用程序中。
- Snackbar 容易被使用和配置。
安装 @material/snackbar
你可以使用 npm 来安装该包：
npm install @material/snackbar
使用 @material/snackbar
要使用 Snackbar，你需要创建一个 div 来存储 Snackbar 元素，这个 div 被称为 Snackbar 容器。 Snackbars 是相对于 Snackbar 容器固定位置的，因此容器需要位于界面上方、下方、左边或右边。
<body> <div id="demo-snackbar-container"></div> </body>
接下来，在 JavaScript 文件中，你需要引用 Snackbar 包和其它的 Material Web 组件，然后实例化 Snackbar 组件并且设置你希望在 Snackbar 上显示的消息文本。
import {MDCSnackbar} from '@material/snackbar'; const snackbarContainer = document.querySelector('#demo-snackbar-container'); const snackbar = new MDCSnackbar(snackbarContainer); snackbar.labelText = '提示信息文本'; snackbar.actionButtonText = '关闭提示信息'; snackbar.open();
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 控件。
snackbar.labelText = '你的消息文本';
actionButtonText
该属性用于设置 Snackbar 上的关闭按钮的文本。
snackbar.actionButtonText = '关闭提示信息';
actionHandler
该属性用于在按钮上添加一个点击操作。调用该方法时不应该显示 Snackbar。
snackbar.actionHandler = e => { console.log('关闭提示信息'); };
timeoutMs
该属性用于在 Snackbar 显示完毕后，自动关闭 Snackbar 控件。如果该属性设置为 0，则 Snackbar 不会自动关闭。
snackbar.timeoutMs = 2000; // 2秒自动关闭
closeOnEscape
该属性用于控制 Esc 键能够关闭 Snackbar。
snackbar.closeOnEscape = true;
isOpen
该属性表示 Snackbar 控件是否为打开状态。
console.log(snackbar.isOpen);
示例代码
你可以使用以下示例代码来尝试 @material/snackbar 包：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ------------ ----- -------------------------------------------------------------- ----------------- ----- ---------------- ----------------------------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------------------- ------- -------------- ------ ------------- ---- --------------------- ----- ----------------- - --------------------------------------------------- ----- -------- - --- ------------------------------- ------------------ - ----- -------- ----- ------------------------- - ----- ------------------ - ----- ---------------------- - -- -- - ----------------- -- ---------------- --------- ------- ------ ---- ----------------------------------- ------- -------展开代码
结论
@material/snackbar 包很容易学习和使用，Snackbar 提示框可以很好的融入现代 Web 应用中。此外，Snackbar 组件有丰富的 API 和选项，可以实现各种自定义的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200680
