Material Design 中 Snackbar 的基本使用教程-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一套 UI 设计语言，旨在为 Android 设备和 Web 应用程序提供一致的视觉和交互体验。Snackbar 是 Material Design 中的一种界面组件，用于向用户显示一条短暂的消息，通常用于提示用户某些操作的结果或提醒用户需要注意的事项。

本文将介绍 Material Design 中 Snackbar 的基本使用方法，包括创建 Snackbar、设置 Snackbar 的样式和动画、以及与其他组件的配合使用等。

创建 Snackbar

要创建一个 Snackbar，首先需要获取到一个 Snackbar 实例。可以通过以下方式创建一个 Snackbar：

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

其中，mdc.snackbar.MDCSnackbar 是 Snackbar 的构造函数，document.querySelector('.mdc-snackbar') 是一个 CSS 选择器，用于获取 Snackbar 的 HTML 元素。在创建 Snackbar 实例后，可以使用 snackbar.show() 方法显示 Snackbar。

snackbar.show({
  message: 'Hello, Snackbar!',
  timeout: 5000, // 5 秒后自动隐藏
  actionText: 'OK',
  actionHandler: () => {
    console.log('Snackbar action clicked!');
  }
});

在调用 show() 方法时，可以传入一个包含以下属性的对象：

message：Snackbar 显示的文本内容。
timeout：Snackbar 显示的时间，单位为毫秒。如果不设置或设置为 0，则 Snackbar 不会自动隐藏。
actionText：Snackbar 上的操作按钮文本。
actionHandler：Snackbar 上的操作按钮点击事件处理函数。

设置 Snackbar 样式和动画

Material Design 中的 Snackbar 具有一些默认的样式和动画，但也可以通过 CSS 和 JavaScript 自定义样式和动画效果。

自定义样式

Snackbar 的 HTML 结构如下所示：

<div class="mdc-snackbar">
  <div class="mdc-snackbar__surface">
    <div class="mdc-snackbar__label"></div>
    <div class="mdc-snackbar__actions">
      <button type="button" class="mdc-button mdc-snackbar__action"></button>
    </div>
  </div>
</div>

可以通过修改这些 HTML 元素的样式来自定义 Snackbar 的外观。例如，可以修改 .mdc-snackbar__surface 的背景色、.mdc-snackbar__label 的字体大小和颜色等。

.mdc-snackbar__surface {
  background-color: #f44336;
}

.mdc-snackbar__label {
  font-size: 16px;
  color: #fff;
}

自定义动画

Snackbar 的出现和隐藏动画分别由 .mdc-snackbar--opening 和 .mdc-snackbar--closing 类控制。可以通过 CSS 或 JavaScript 修改这些类的动画效果。

例如，可以通过 CSS 修改 Snackbar 的出现动画为淡入效果：

// javascriptcn.com 代码示例
.mdc-snackbar--opening {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

与其他组件的配合使用

Snackbar 可以与其他 Material Design 组件配合使用，例如 Button、Text Field 等。通常情况下，当用户与这些组件交互时，会触发某些事件，Snackbar 可以用来提示用户这些事件的结果或提醒用户需要注意的事项。

例如，当用户提交一个表单时，可以在表单下方显示一个 Snackbar，提示用户提交成功：

// javascriptcn.com 代码示例
<form>
  <div class="mdc-text-field">
    <input type="text" class="mdc-text-field__input">
    <label class="mdc-floating-label">Name</label>
  </div>
  <button type="submit" class="mdc-button mdc-button--raised">Submit</button>
</form>

<div class="mdc-snackbar">
  <div class="mdc-snackbar__surface">
    <div class="mdc-snackbar__label"></div>
    <div class="mdc-snackbar__actions">
      <button type="button" class="mdc-button mdc-snackbar__action"></button>
    </div>
  </div>
</div>

<script>
  const form = document.querySelector('form');
  const snackbar = new mdc.snackbar.MDCSnackbar(document.querySelector('.mdc-snackbar'));

  form.addEventListener('submit', (event) => {
    event.preventDefault();
    snackbar.show({
      message: 'Form submitted successfully!',
      timeout: 5000
    });
  });
</script>

在上面的示例中，当用户提交表单时，会触发 submit 事件，Snackbar 会显示一条提示用户提交成功的消息。

总结

本文介绍了 Material Design 中 Snackbar 的基本使用方法，包括创建 Snackbar、设置 Snackbar 的样式和动画、以及与其他组件的配合使用等。通过学习本文，读者可以了解到如何在 Web 应用程序中使用 Snackbar，提高用户体验和交互效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657f4c79d2f5e1655da2957c