Material Design 中 Snack bar 的使用及遇到的问题-JavaScript中文网-JavaScript教程资源分享门户

介绍

Material Design 是 Google 推出的设计语言，它提供了一套通用的设计规范，使设计师和开发者能够更加容易地创建出美观、一致的应用程序。其中，Snack bar 是 Material Design 中的一个重要组件，它可以用来显示简短的通知信息，比如用户操作成功、失败或需要注意的情况。

Snack bar 通常以一个底部弹出的形式展示，用户可以通过点击或者滑动来关闭它。在 Material Design 中，Snack bar 通常使用一种浅色的背景和深色的文本和图标，以及一个动态的进度条来增强用户体验。

使用

在前端开发中，我们可以使用 Material Design 中的 Snack bar 组件来实现一些简单的通知功能。在 HTML 中，我们可以使用以下代码来创建一个 Snack bar：

-- -------------------- ---- -------
---- ---------------------
  ---- ------------------------------
    ---- ---------------------------
         -------------
         -------------------
      ---- -- - -------- --------
    ------
    ---- ------------------------------
      ------- ----------------- ---------------------------------
    ------
  ------
------

在 JavaScript 中，我们可以使用以下代码来初始化 Snack bar：

import { MDCSnackbar } from '@material/snackbar';

const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
snackbar.open();

这样就可以在页面中展示一个简单的 Snack bar，并在页面加载完成后自动打开它。当用户点击 OK 按钮或者滑动 Snack bar 时，它会自动关闭。

遇到的问题

在使用 Material Design 中的 Snack bar 过程中，我们可能会遇到一些问题。以下是一些常见的问题以及解决方法：

1. Snack bar 显示不正确

如果 Snack bar 显示不正确，比如位置偏移或者样式不正确，可能是因为没有正确引入 Material Design 的样式文件。我们可以在 HTML 文件中添加以下代码来引入样式文件：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/snackbar@5.1.0/dist/mdc.snackbar.min.css">

2. Snack bar 无法关闭

如果 Snack bar 无法通过点击或者滑动来关闭，可能是因为没有正确初始化 Snack bar。我们可以在 JavaScript 文件中添加以下代码来初始化 Snack bar：

import { MDCSnackbar } from '@material/snackbar';

const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));

3. Snack bar 显示太快

如果 Snack bar 显示太快，用户可能无法看到它。我们可以在 JavaScript 文件中添加以下代码来延迟显示 Snack bar：

import { MDCSnackbar } from '@material/snackbar';

const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
setTimeout(() => {
  snackbar.open();
}, 1000);

这样就可以延迟 1 秒钟后才显示 Snack bar。

结论

Material Design 中的 Snack bar 是一个非常实用的组件，它可以用来显示简短的通知信息。在前端开发中，我们可以使用 Material Design 中的 Snack bar 组件来实现一些简单的通知功能。在使用 Snack bar 时，我们需要注意一些常见的问题，并采取相应的解决方法来保证它的正常使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6753f6491b963fe9cc4b45a6