标签是前端开发中十分常见的元素，它可以用于分类、筛选、搜索等功能。在 Material Design 中，标签的设计风格也非常独特，它可以为网页增添一份时尚感和美观度。本文将为大家分享如何使用 Material Design 实现标签效果的详细教程。
1. 准备工作
在开始教程之前，我们需要先准备好以下工具和资源：
- Google Material Icons 字体库
- Materialize CSS 框架
- jQuery 库
以上资源可以通过 CDN 或者下载到本地使用。在本文中，我们将使用 CDN 方式引入这些资源。
在 HTML 文件中，需要在 <head> 标签中引入以下代码：
----- -------------------------------------------------------------- ----------------- ----- --------------------------------------------------------------------------------------- ----------------- ------- --------------------------------------------------------------------------------- ------- ----------------------------------------------------------------------------------------------
2. 实现基础标签
首先，我们需要创建一个基础标签。在 HTML 文件中添加以下代码：
---- ------------- --- -- ------------ ------------------------- ------
这段代码中，<div> 元素的 class 属性为 chip，这是 Material Design 中标签的样式类。标签的内容为 Tag，在标签右侧添加了一个关闭按钮，用于删除标签。关闭按钮使用了 Google Material Icons 字体库中的 close 图标。
在 CSS 文件中，我们可以为标签添加样式：
----- - -------- ------------- -------- - ----- ------- ----- ---------- ----- ------------ ----- -------------- ----- ----------------- -------- ------------- ---- - ----- - - ------- -------- ------------ ---- -
这段代码中，我们设置了标签的基本样式，包括圆角边框、背景色、字体大小等。关闭按钮的样式设置了鼠标指针为手型，并且添加了左边距。
现在，我们已经实现了一个简单的标签效果，如下图所示：
3. 实现可添加标签
接下来，我们将实现一个可添加标签的效果。在 HTML 文件中添加以下代码：
---- -------------------- ---- -------------------- ------ ----------- --------------- ------ ------------------- - ----------- ------
这段代码中，我们创建了一个容器 <div> 元素，用于显示标签。在标签容器下方，我们添加了一个输入框，用于添加新的标签。输入框使用了 Materialize CSS 框架中的 input-field 样式类，可以使输入框拥有更好的交互效果。
在 JavaScript 文件中，我们可以为输入框添加事件监听器：
--------------------------------------- -
-- -------------- --- --- -
--- --- - ------- ------------------------------------------
---------------- ------------ -----------------------------
------------------------
----------------
-
---这段代码中，我们为输入框添加了按键事件监听器，当用户按下回车键时，会触发添加标签的操作。我们创建了一个新的标签元素，并将用户输入的文本作为标签内容。然后，我们将标签添加到标签容器中，并清空输入框的内容。
现在，我们已经实现了一个可添加标签的效果，如下图所示：
4. 总结
通过本文的教程，我们学习了如何使用 Material Design 实现标签效果。我们实现了一个基础标签和一个可添加标签的效果，并添加了相应的样式和事件监听器。通过这些示例，我们可以更好地理解 Material Design 的设计风格和开发方法，为我们的前端开发工作提供了一些指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656710d6d2f5e1655dff868e