Material Design：SnackBar 控件的使用方法-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种全新的设计语言，旨在为用户提供更加美观、直观、自然的界面体验。其中，SnackBar 控件是 Material Design 中的一种非常实用的交互控件，它可以在屏幕底部显示一条简短的提示信息，让用户更加方便地进行操作。

本文将详细介绍 Material Design 中 SnackBar 控件的使用方法，包括控件的基本结构、使用场景、常用属性和示例代码。通过学习本文，读者可以更好地掌握 SnackBar 控件的使用技巧，为自己的前端开发工作提供帮助。

SnackBar 控件的基本结构

SnackBar 控件是由 Material Design 规范定义的一种交互控件，它通常用于在屏幕底部显示一条简短的提示信息，比如操作成功、操作失败、网络异常等。SnackBar 控件的基本结构如下：

// www.javascriptcn.com code example
<div class="mdc-snackbar">
  <div class="mdc-snackbar__surface">
    <div class="mdc-snackbar__label" role="status" aria-live="polite"></div>
    <div class="mdc-snackbar__actions">
      <button class="mdc-button mdc-snackbar__action">Action</button>
      <button class="mdc-button mdc-snackbar__dismiss">Dismiss</button>
    </div>
  </div>
</div>

其中，.mdc-snackbar 是 SnackBar 控件的最外层容器，.mdc-snackbar__surface 是 SnackBar 的显示区域，.mdc-snackbar__label 是 SnackBar 的提示信息区域，.mdc-snackbar__actions 是 SnackBar 的操作按钮区域，.mdc-snackbar__action 和 .mdc-snackbar__dismiss 是两个操作按钮，分别表示“确认”和“取消”。

SnackBar 控件的使用场景

SnackBar 控件通常用于以下场景：

提示用户操作成功或失败。当用户完成某个操作后，可以通过 SnackBar 控件在屏幕底部显示一条简短的提示信息，告知用户操作的结果。比如，“操作成功”、“操作失败”等。
提示用户网络异常。当用户进行网络请求时，如果出现网络异常，可以通过 SnackBar 控件在屏幕底部显示一条简短的提示信息，告知用户网络异常的原因，并提供相应的解决方法。
提示用户进行某个操作。当用户需要进行某个操作时，可以通过 SnackBar 控件在屏幕底部显示一条简短的提示信息，告知用户需要进行的操作，比如“请先登录”、“请先填写完整信息”等。

SnackBar 控件的常用属性

SnackBar 控件有以下常用属性：

data-mdc-auto-init="MDCSnackbar"：表示自动初始化 SnackBar 控件。
data-mdc-snackbar：表示 SnackBar 控件的最外层容器。
data-mdc-snackbar-message：表示 SnackBar 控件的提示信息。
data-mdc-snackbar-action-text：表示 SnackBar 控件的操作按钮文本。
data-mdc-snackbar-dismiss-text：表示 SnackBar 控件的取消按钮文本。
data-mdc-snackbar-action-on-click：表示 SnackBar 控件的操作按钮点击事件。
data-mdc-snackbar-dismiss-on-click：表示 SnackBar 控件的取消按钮点击事件。

SnackBar 控件的示例代码

以下是一个基本的 SnackBar 控件示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SnackBar 控件示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/snackbar@6.0.0/dist/mdc.snackbar.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@material/snackbar@6.0.0/dist/mdc.snackbar.min.js"></script>
</head>
<body>
  <button onclick="showSnackbar()">显示 SnackBar</button>
  <div class="mdc-snackbar" data-mdc-auto-init="MDCSnackbar">
    <div class="mdc-snackbar__surface">
      <div class="mdc-snackbar__label" role="status" aria-live="polite"></div>
      <div class="mdc-snackbar__actions">
        <button class="mdc-button mdc-snackbar__action" data-mdc-snackbar-action-on-click="handleActionClick()">确认</button>
        <button class="mdc-button mdc-snackbar__dismiss" data-mdc-snackbar-dismiss-on-click="handleDismissClick()">取消</button>
      </div>
    </div>
  </div>
  <script>
    const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));
    function showSnackbar() {
      const options = {
        message: '操作成功',
        actionText: '撤销',
        actionHandler: function() {
          console.log('撤销操作');
        },
        dismissText: '关闭',
        dismissHandler: function() {
          console.log('关闭提示');
        }
      };
      snackbar.show(options);
    }
    function handleActionClick() {
      console.log('确认操作');
    }
    function handleDismissClick() {
      console.log('取消操作');
    }
  </script>
</body>
</html>

在上述示例代码中，我们通过引入 Material Design 中的 SnackBar 控件库，并在页面中添加了一个按钮和一个 SnackBar 控件。当用户点击按钮时，会触发 showSnackbar() 函数，该函数会通过 SnackBar 控件的 show() 方法显示一条提示信息。同时，我们还为 SnackBar 控件的操作按钮和取消按钮绑定了点击事件，分别对应 handleActionClick() 函数和 handleDismissClick() 函数。

通过上述示例代码，我们可以更加清晰地了解 SnackBar 控件的使用方法和相关属性，进一步提升自己的前端开发能力。

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

Material Design：SnackBar 控件的使用方法

SnackBar 控件的基本结构

SnackBar 控件的使用场景

SnackBar 控件的常用属性

SnackBar 控件的示例代码

接着读