Matarialize中文技术社区-努力前行个人博客-使用 Materialize CSS 框架中的 Form Chips

“向向日葵一样向着太阳”

使用 Materialize CSS 框架中的 Form Chips

努力前行 2024-09-27 10:03:02

136 Chips 专栏

Chips 是 Materialize CSS 框架中一种用于展示输入或内容的灵活组件，尤其适合用于展示用户输入的标签、选项或信息。Chips 组件可以非常有效地组织内容，提升用户体验。本文将详细介绍如何在 Materialize CSS 中使用 Chips，包括使用方法、属性、方法，以及与其他组件的结合使用示例。

1. 什么是 Chips？

Chips 是一种轻量级的标签，用于展示相关信息。它们可以用作输入组件，让用户能够添加、删除和查看输入的内容。Chips 通常用于表示用户选择的项、过滤器或其他与输入内容相关的信息。

2. 引入 Materialize CSS

在使用 Chips 之前，需要确保在 HTML 文件中引入 Materialize CSS 的样式和 JavaScript 文件。

2.1 引入 CDN 资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Materialize Chips 示例</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>

    <!-- 页面内容 -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

3. 基本用法

3.1 创建基本的 Chips 组件

在 Materialize CSS 中创建 Chips 组件非常简单，只需使用 <div> 和适当的类。以下是一个基本的 Chips 示例：

<div class="container">
    <h1 class="header">Chips 示例</h1>
    <div class="chips" id="chips-input"></div>
</div>

3.2 代码详解

HTML 部分：
- 创建一个 <div> 元素，并为其添加 chips 类来启用 Chips 功能。

4. Chips 的基本功能

4.1 添加 Chips

使用 Chips 组件，可以通过 JavaScript 来动态添加 Chips。以下是一个示例，展示如何添加 Chips：

<div class="container">
    <h1 class="header">Chips 添加示例</h1>
    <div class="chips" id="chips-input"></div>
    <input type="text" id="chip-input" placeholder="输入标签并按回车">
    <a class="waves-effect waves-light btn" id="add-chip-btn">添加标签</a>
</div>

<script>
    $(document).ready(function() {
        $('#add-chip-btn').click(function() {
            var chipValue = $('#chip-input').val().trim();
            if (chipValue) {
                var newChip = $('<div class="chip">' + chipValue + '<i class="close material-icons">close</i></div>');
                $('#chips-input').append(newChip);
                $('#chip-input').val(''); // 清空输入框
            }
        });

        $('#chips-input').on('click', '.close', function() {
            $(this).parent('.chip').remove(); // 移除 Chip
        });
    });
</script>

4.2 代码详解

输入框：创建一个文本输入框，用户可以输入标签。
添加按钮：用户点击按钮后，输入的标签会添加到 Chips 中。
移除 Chips：每个 Chip 上都有一个关闭图标，用户可以点击它来移除对应的 Chip。

4.3 Chips 组件样式

为了更好地展示 Chips，可以对其样式进行自定义：

<style>
    .chip {
        background-color: #00796b; /* 自定义颜色 */
        color: white;
    }
</style>

5. Chips 的高级功能

5.1 通过输入框添加 Chips

Chips 组件可以直接使用输入框来添加标签，用户在输入框中输入文本后按下回车键即可添加。以下是实现的代码：

<div class="container">
    <h1 class="header">Chips 输入框示例</h1>
    <div class="chips" id="chips-input"></div>
    <input type="text" id="chip-input" placeholder="输入标签并按回车">
</div>

<script>
    $(document).ready(function() {
        $('#chip-input').keypress(function(event) {
            if (event.which === 13) { // 按下回车键
                var chipValue = $(this).val().trim();
                if (chipValue) {
                    var newChip = $('<div class="chip">' + chipValue + '<i class="close material-icons">close</i></div>');
                    $('#chips-input').append(newChip);
                    $(this).val(''); // 清空输入框
                }
            }
        });

        $('#chips-input').on('click', '.close', function() {
            $(this).parent('.chip').remove(); // 移除 Chip
        });
    });
</script>

5.2 代码详解

键盘事件：使用 keypress 事件监听用户的输入，当用户按下回车键时添加新的 Chip。
逻辑处理：检查输入框内容是否为空，如果不为空，则创建新的 Chip。

5.3 Chips 的多种状态

Materialize 提供了几种不同的 Chips 状态，可以通过 input 和 autocomplete 来实现。例如，允许用户选择 Chips 或手动输入：

<div class="container">
    <h1 class="header">Chips 选择示例</h1>
    <div class="chips" id="chips-input"></div>
    <input type="text" id="chip-input" placeholder="输入标签并按回车">
</div>

<script>
    $(document).ready(function() {
        // 示例数据
        var predefinedChips = ['Apple', 'Banana', 'Cherry'];

        // 创建 Chips
        predefinedChips.forEach(function(chip) {
            var newChip = $('<div class="chip">' + chip + '<i class="close material-icons">close</i></div>');
            $('#chips-input').append(newChip);
        });

        // 监听输入框的回车事件
        $('#chip-input').keypress(function(event) {
            if (event.which === 13) { // 按下回车键
                var chipValue = $(this).val().trim();
                if (chipValue) {
                    var newChip = $('<div class="chip">' + chipValue + '<i class="close material-icons">close</i></div>');
                    $('#chips-input').append(newChip);
                    $(this).val(''); // 清空输入框
                }
            }
        });

        // 监听关闭按钮事件
        $('#chips-input').on('click', '.close', function() {
            $(this).parent('.chip').remove(); // 移除 Chip
        });
    });
</script>

5.4 代码详解

在这个示例中，我们创建了一些预定义的 Chips，并允许用户在输入框中添加自定义 Chips。用户可以通过关闭按钮删除 Chips。

6. Chips 与其他组件结合使用

6.1 Chips 与 Select 组件结合使用

Chips 可以与 Select 组件结合使用，创建一个更丰富的用户交互体验。以下是一个示例：

<div class="container">
    <h1 class="header">Chips 与 Select 示例</h1>
    <div class="input-field col s12">
        <select id="fruit-select" multiple>
            <option value="" disabled selected>选择水果</option>
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="cherry">樱桃</option>
        </select>
        <label>水果选择</label>
    </div>
  
    <div class="chips" id="chips-input"></div>
    <input type="text" id="chip-input" placeholder="输入标签并按回车">
</div>

<script>
    $(document).ready(function() {
        $('select').formSelect(); // 初始化 Select 组件

        $('#chip-input').keypress(function(event) {
            if (event.which === 13) {
                var chipValue = $(this).val().trim();
                if (chipValue) {
                    var newChip = $('<div class="chip">' + chipValue + '<i class="close material-icons">close</i></div>');
                    $('#chips-input').append(newChip);
                    $(this).val(''); // 清空输入框
                }
            }
        });

        $('#chips-input').on('click', '.close', function() {
            $(this).parent('.chip').remove(); // 移除 Chip
        });
    });
</script>

6.2 代码详解

Select 组件：创建一个多选的 Select 组件，用户可以选择多个水果。
与 Chips 的结合：用户可以在输入框中输入自定义标签，同时可以选择水果选项。所有选择和输入的标签都会以 Chips 的形式展示。

7. 总结

在本文中，我们详细介绍了 Materialize CSS 中的 Chips 组件的使用，包括基本用法、属性和方法，以及如何与其他组件结合使用。通过多种示例代码，展示了如何实现 Chips 的添加、删除和样式自定义。

Chips 组件在提升用户交互体验和内容展示方面非常有效。希望这篇文章能够帮助你更好地理解和使用 Materialize CSS 的 Chips 组件，从而创建出更灵活和美观的用户界面。

参考资料

通过上述示例和解释，您可以轻松掌握 Chips 组件的使用方式，并应用到自己的项目中。希望这能为您带来灵感与帮助！

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}

努力前行