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

Snackbar 是 Material Design 中非常常见的一种 UI 控件。它的主要用途是向用户展示轻量、短暂的提醒或操作结果信息。Snackbar 是一个顶部或底部弹起的小提示框，它包含一段文字和一个操作按钮。在前端开发中，通过 Snackbar 控件可以增强用户的交互体验，达到更好的用户满意度。

本篇文章将介绍 Snackbar 的使用教程，包括创建 Snackbar、自定义 Snackbar 样式、Snackbar 的回调函数等内容，并提供示例代码，帮助读者更好地理解和掌握 Snackbar 的使用方法。

1. 创建 Snackbar

在 Material Design 中，创建 Snackbar 可以使用如下代码：

<div id="snackbar">This is a snackbar!</div>

var snackbar = document.getElementById("snackbar");
var snackbarInstance = new mdui.snackbar(snackbar, options);

在上述代码中，mdui.snackbar 是 Material Design UI 库中创建 Snackbar 的方法。我们首先获取 HTML 元素 snackbar 的引用，然后创建 Snackbar 实例 snackbarInstance。可以看到，mdui.snackbar 方法接收两个参数：snackbar 和 options。

其中，snackbar 表示需要创建 Snackbar 的 HTML 元素，options 是一个 JavaScript 对象，用于设置 Snackbar 的相关属性。

在 options 对象中，常用的属性有：message（展示的信息内容）、timeout（Snackbar 显示的时间）、buttonText（操作按钮的文字）、buttonColor（操作按钮的颜色）等。

Snackbar 的显示时间可以通过 timeout 属性进行设置。timeout 属性的默认值为 4000 毫秒（4 秒）。此外，Snackbar 还有其他一些设置，读者可以在 Material Design UI 库的官方文档中进行了解。

2. 自定义 Snackbar 样式

除了默认的 Snackbar 样式外，我们还可以通过 CSS 自定义 Snackbar 的样式。CSS 样式表如下：

#snackbar {
    background-color: #323232;
    color: #f1f1f1;
    font-size: 24px;
}

在上述代码中，我们通过设置 background-color 属性和 color 属性，改变了 Snackbar 的背景色和文字颜色。通过设置 font-size 属性，改变了 Snackbar 中文字的字体大小。

除了这些基本的样式属性外，我们还可以通过自定义 CSS 样式表来设置 Snackbar 的位置、宽度、高度等内容。通过这些自定义样式，使得 Snackbar 风格更加多样化，更加符合用户需求。

3. Snackbar 的回调函数

Snackbar 的回调函数是 Snackbar 在某些状态或事件发生时所调用的函数。Material Design UI 库提供了两个回调函数：onopen 和 onclose。

onopen 回调函数在 Snackbar 展示时被调用，而 onclose 回调函数在 Snackbar 隐藏时被调用。这两个回调函数都接受 Snackbar 实例作为参数。

示例如下：

// javascriptcn.com 代码示例
var snackbar = document.getElementById("snackbar");
var snackbarInstance = new mdui.snackbar(snackbar, {
    message: "This is a snackbar!",
    onopen: function(snackbar) {
        console.log("Snackbar is shown.");
    },
    onclose: function(snackbar) {
        console.log("Snackbar is hidden.");
    }
});

在上述示例中，我们为 Snackbar 实例创建了 onopen 和 onclose 两个回调函数。当 Snackbar 展示时，onopen 函数被调用，控制台将输出“Snackbar is shown.”消息。当 Snackbar 隐藏时，onclose 函数被调用，控制台将输出“Snackbar is hidden.”消息。

通过使用回调函数，我们可以在 Snackbar 的展示和隐藏时，自定义一些操作，从而达到更好的用户交互体验。

示例代码

下面是一个完整的 Snackbar 的示例代码，包含创建 Snackbar、自定义 Snackbar 样式、Snackbar 的回调函数等内容。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>

        <!-- MDUI CSS  -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui/dist/css/mdui.min.css">

        <!-- Custom CSS -->
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <button id="showSnackbar">Show Snackbar</button>

        <div id="snackbar">This is a snackbar!</div>

        <!-- JQuery -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

        <!-- MDUI JS -->
        <script src="https://cdn.jsdelivr.net/npm/mdui/dist/js/mdui.min.js"></script>

        <!-- Custom JS -->
        <script src="./js/main.js"></script>
    </body>
</html>

// javascriptcn.com 代码示例
// 1. 获取按钮对象
var showSnackbarButton = document.getElementById("showSnackbar");

// 2. 为按钮添加 click 事件响应函数
showSnackbarButton.onclick = function() {
    var snackbar = document.getElementById("snackbar");

    // 3. 创建 Snackbar 对象
    var snackbarInstance = new mdui.snackbar(snackbar, {
        message: "This is a snackbar!",
        timeout: 2000,
        buttonText: "OK",
        buttonColor: "#fff",
        onopen: function(snackbar) {
            console.log("Snackbar is shown.");
        },
        onclose: function(snackbar) {
            console.log("Snackbar is hidden.");
        }
    });

    // 4. 显示 Snackbar
    snackbarInstance.open();
};

#snackbar {
    background-color: #323232;
    color: #f1f1f1;
    font-size: 24px;
}

在此示例代码中，我们通过 jQuery 获取 showSnackbarButton 按钮对象，并为该按钮添加 click 事件响应函数。在 click 事件响应函数中，我们使用 Material Design UI 库中的 mdui.snackbar() 方法，创建 Snackbar 对象 snackbarInstance。

在 Snackbar 对象的创建过程中，我们设置了 Snackbar 的 message、timeout、buttonText、buttonColor、onopen 和 onclose 函数等属性。接着，我们使用 Snackbar 对象的 open() 方法，显示 Snackbar。最后，我们使用 CSS 样式表，为 Snackbar 设置了自定义样式。

总结

本篇文章介绍了 Material Design 中 Snackbar 的使用教程，包括创建 Snackbar、自定义 Snackbar 样式、Snackbar 的回调函数等内容，并附有示例代码。相信读者通过本文的学习，能够掌握 Snackbar 的基本用法，并进一步优化与丰富 Snackbar 的设计，提升用户的使用体验。

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