如何实现 Material Design 中的 Chip 控件
在 Material Design 中，Chip 控件是一种方便的交互式 UI 元素，它能够展现一定的信息和标记，并支持用户操作。在前端开发中实现 Chip 控件是一项重要的技术，下面将介绍如何实现。
- HTML 结构
在实现一个 Chip 控件之前，我们需要定义该控件的 HTML 结构。Chip 控件通常由一个容器元素和一个具有可关闭功能的内容元素组成。例如：
<div class="chip">
<span class="text">标签</span>
<span class="close">
<i class="material-icons">close</i>
</span>
</div>上面的 HTML 代码定义了一个具有可关闭功能的 Chip 控件，其中 .text 类用于展示 Chip 的内容，.close 类表示关闭按钮，使用了 Material Design 图标库中的 close 图标。
- 实现样式
除了定义元素结构，我们还需要实现相应的 CSS 控制 Chip 的外观和行为。以下是一个简单的 CSS 示例：
-- -------------------- ---- -------
----- -
-------- -------------
----------------- --------
-------------- -----
-------- ----
---------- -----
------------ -----
------------- ----
-
----- ----- -
-------- -------------
------------- ----
-
----- ------ -
-------- -------------
------- --------
-
----- ------ - -
---------- -----
------------ -----
-在上述 CSS 代码中，我们使用了 display: inline-block 让 Chip 控件在文本中显示。 background-color 设置了背景颜色， border-radius 定义圆角半径， padding 指定内边距和行高， margin-right 控制 Chip 之间的间距。
- 实现 JavaScript
为了实现可关闭的 Chip 控件，我们需要使用 JavaScript。以下是一个基本的实现：
const chips = document.querySelectorAll('.chip');
chips.forEach(function(chip) {
const close = chip.querySelector('.close');
close.addEventListener('click', function() {
chip.remove();
});
});该脚本首先获取所有具有 .chip 类的元素，然后循环遍历并为每个元素的关闭按钮添加事件处理程序。点击关闭按钮将删除对应的 Chip。
- 扩展功能
为了更好地支持 Material Design 中的 Chip 控件，我们可以扩展其它交互功能，例如增加选择状态、添加选中/非选中样式、使用动画等。
以下是一个实现选中状态的示例：
-- -------------------- ---- -------
-------------- -
----------------- --------
-
-------------- ----- -
------ --------
-
-------------- ------ - -
------ --------
-const chips = document.querySelectorAll('.chip');
chips.forEach(function(chip) {
chip.addEventListener('click', function() {
chip.classList.toggle('selected');
});
});在上述代码中，我们使用了 .selected 类来表示选中状态。在点击一个 Chip 时，我们为其添加或删除这个类。
- 完整示例
最后，我们来展示一个完整的可关闭 Chip 控件，具有选中状态和基本样式扩展：
<div class="chip">
<span class="text">标签</span>
<span class="close">
<i class="material-icons">close</i>
</span>
</div>-- -------------------- ---- -------
----- -
-------- -------------
----------------- --------
-------------- -----
-------- ----
---------- -----
------------ -----
------------- ----
------- --------
-
----------- -
----------------- --------
-
-------------- -
----------------- --------
-
-------------- ----- -
------ --------
-
-------------- ------ - -
------ --------
-
----- ----- -
-------- -------------
------------- ----
-
----- ------ -
-------- -------------
-
----- ------ - -
---------- -----
------------ -----
-
----- ------ ------- -
------ --------
--- -------------------- ---- -------
----- ----- - -----------------------------------
---------------------------- -
------------------------------ ---------- -
----------------------------------
---
----- ----- - -----------------------------
------------------------------- ---------- -
--------------
---
---在本文中，我们详细介绍了如何实现 Material Design 中的 Chip 控件，并提供了示例代码。读者可以根据这些代码自行扩展和定制这个控件，以满足不同的应用需求。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67ce55f1e46428fe9e873b64