Material Design 中的 Snackbar 使用方法详解-FunTeaLearn Online Web Tutorials

什么是 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：

// www.javascriptcn.com code example
// 创建 Snackbar 实例
var snackbar = document.createElement('div');
snackbar.classList.add('mdl-js-snackbar', 'mdl-snackbar');

// 设置 Snackbar 内容
snackbar.setAttribute('data-message', '这是一条提示消息');

// 设置 Snackbar 操作按钮
var button = document.createElement('button');
button.classList.add('mdl-button', 'mdl-js-button');
button.textContent = '撤销';
button.addEventListener('click', function() {
  // 点击操作按钮后的回调函数
});
snackbar.appendChild(button);

// 显示 Snackbar
document.body.appendChild(snackbar);
componentHandler.upgradeElement(snackbar);
snackbar.MaterialSnackbar.showSnackbar();

这段代码中，我们首先创建了一个 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 样式进行设置。

// www.javascriptcn.com code example
/* 自定义 Snackbar 主题 */
.mdl-snackbar--theme-custom {
  background-color: #333;
  color: #fff;
}

.mdl-snackbar--theme-custom .mdl-button {
  color: #fff;
}

<!-- 自定义 Snackbar 主题 -->
<div class="mdl-js-snackbar mdl-snackbar mdl-snackbar--theme-custom">
  ...
</div>

Snackbar 事件

Snackbar 有以下几个事件：

onshow：Snackbar 显示时触发；
onhide：Snackbar 隐藏时触发；
onaction：Snackbar 操作按钮点击时触发。

这些事件可以通过以下方式进行监听：

// www.javascriptcn.com code example
var snackbar = document.querySelector('.mdl-js-snackbar');
snackbar.addEventListener('onshow', function() {
  console.log('Snackbar 显示了');
});

snackbar.addEventListener('onhide', function() {
  console.log('Snackbar 隐藏了');
});

snackbar.addEventListener('onaction', function() {
  console.log('Snackbar 操作按钮被点击了');
});

Snackbar 的指导意义

Snackbar 是一种简单易用的消息提示组件，可以帮助用户快速了解操作的结果，提高用户体验。

在实际开发中，我们可以使用 Snackbar 来提示用户操作的结果、提醒用户注意事项、给用户提供一些反馈等。

除了 Snackbar，Material Design 还提供了许多其他组件和规范，可以帮助我们构建出更好的用户界面。学习和掌握这些 Material Design 组件和规范，对于前端开发者来说是非常有帮助的。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d9c0b1a941bf713417eea2

Material Design 中的 Snackbar 使用方法详解