什么是 Snackbar
Snackbar 是 Material Design 中的一个重要组件，它可以在屏幕底部显示短暂的消息提示，通常用于反馈用户操作的结果。
Snackbar 具有以下特点：
- 显示在屏幕底部，不会遮挡其他内容；
- 短暂显示，自动消失；
- 可以包含一个操作按钮，让用户进行相关操作；
- 可以通过主题进行自定义。
如何使用 Snackbar
引入依赖
在使用 Snackbar 之前，需要在项目中引入相关依赖。如果你使用的是基于 Material Design 的 UI 框架，如 Material-UI、Vuetify 等，则不需要额外引入依赖。
如果你使用的是原生的 JavaScript 或其他 UI 框架，可以通过以下方式引入 Snackbar：
<!-- 引入 Material Design 样式 --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.indigo-pink.min.css"> <!-- 引入 Material Design JavaScript 库 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
创建 Snackbar
在需要显示 Snackbar 的地方，可以通过以下方式创建 Snackbar：
-- -------------------- ---- ------- -- -- -------- -- --- -------- - ------------------------------ ----------------------------------------- ---------------- -- -- -------- -- ------------------------------------- ------------ -- -- -------- ---- --- ------ - --------------------------------- ---------------------------------- ----------------- ------------------ - ----- -------------------------------- ---------- - -- ------------ --- ----------------------------- -- -- -------- ------------------------------------ ------------------------------------------ -----------------------------------------
这段代码中，我们首先创建了一个 div 元素，并给它添加了 mdl-js-snackbar 和 mdl-snackbar 两个类名，这是 Material Design Snackbar 组件所必需的类名。
接着，我们使用 setAttribute 方法设置了 Snackbar 的内容，这里我们设置了一条简单的提示消息。
然后，我们创建了一个操作按钮，并添加到 Snackbar 中。这里我们给按钮添加了一个点击事件的回调函数，可以根据实际需要进行相应的操作。
最后，我们通过 componentHandler.upgradeElement 方法对 Snackbar 进行初始化，然后调用 showSnackbar 方法显示 Snackbar。
Snackbar 主题
Snackbar 的样式可以通过主题进行自定义。Material Design 提供了三种默认的主题：mdl-snackbar--theme-primary、mdl-snackbar--theme-accent 和 mdl-snackbar--theme-warn，分别对应主色、强调色和警告色。
<!-- Snackbar 主题 --> <div class="mdl-js-snackbar mdl-snackbar mdl-snackbar--theme-primary"> ... </div>
如果需要自定义主题，可以通过 CSS 样式进行设置。
-- -------------------- ---- ------- -- --- -------- -- -- --------------------------- - ----------------- ----- ------ ----- - --------------------------- ----------- - ------ ----- -
<!-- 自定义 Snackbar 主题 --> <div class="mdl-js-snackbar mdl-snackbar mdl-snackbar--theme-custom"> ... </div>
Snackbar 事件
Snackbar 有以下几个事件：
onshow：Snackbar 显示时触发；onhide：Snackbar 隐藏时触发；onaction：Snackbar 操作按钮点击时触发。
这些事件可以通过以下方式进行监听：
-- -------------------- ---- ------- --- -------- - ------------------------------------------- ----------------------------------- ---------- - --------------------- ------ --- ----------------------------------- ---------- - --------------------- ------ --- ------------------------------------- ---------- - --------------------- ----------- ---
Snackbar 的指导意义
Snackbar 是一种简单易用的消息提示组件，可以帮助用户快速了解操作的结果，提高用户体验。
在实际开发中，我们可以使用 Snackbar 来提示用户操作的结果、提醒用户注意事项、给用户提供一些反馈等。
除了 Snackbar，Material Design 还提供了许多其他组件和规范，可以帮助我们构建出更好的用户界面。学习和掌握这些 Material Design 组件和规范，对于前端开发者来说是非常有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d9c0b1a941bf713417eea2
