Material Design 实现标签效果的详细教程-JavaScript中文网-JavaScript教程资源分享门户

标签是前端开发中十分常见的元素，它可以用于分类、筛选、搜索等功能。在 Material Design 中，标签的设计风格也非常独特，它可以为网页增添一份时尚感和美观度。本文将为大家分享如何使用 Material Design 实现标签效果的详细教程。

1. 准备工作

在开始教程之前，我们需要先准备好以下工具和资源：

Google Material Icons 字体库
Materialize CSS 框架
jQuery 库

以上资源可以通过 CDN 或者下载到本地使用。在本文中，我们将使用 CDN 方式引入这些资源。

在 HTML 文件中，需要在 <head> 标签中引入以下代码：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

2. 实现基础标签

首先，我们需要创建一个基础标签。在 HTML 文件中添加以下代码：

<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>

这段代码中，<div> 元素的 class 属性为 chip，这是 Material Design 中标签的样式类。标签的内容为 Tag，在标签右侧添加了一个关闭按钮，用于删除标签。关闭按钮使用了 Google Material Icons 字体库中的 close 图标。

在 CSS 文件中，我们可以为标签添加样式：

// javascriptcn.com 代码示例
.chip {
  display: inline-block;
  padding: 0 12px;
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  border-radius: 16px;
  background-color: #e0e0e0;
  margin-right: 8px;
}
.chip i {
  cursor: pointer;
  margin-left: 8px;
}

这段代码中，我们设置了标签的基本样式，包括圆角边框、背景色、字体大小等。关闭按钮的样式设置了鼠标指针为手型，并且添加了左边距。

现在，我们已经实现了一个简单的标签效果，如下图所示：

3. 实现可添加标签

接下来，我们将实现一个可添加标签的效果。在 HTML 文件中添加以下代码：

<div class="chips"></div>
<div class="input-field">
  <input type="text" id="tag-input">
  <label for="tag-input">Add a tag</label>
</div>

这段代码中，我们创建了一个容器 <div> 元素，用于显示标签。在标签容器下方，我们添加了一个输入框，用于添加新的标签。输入框使用了 Materialize CSS 框架中的 input-field 样式类，可以使输入框拥有更好的交互效果。

在 JavaScript 文件中，我们可以为输入框添加事件监听器：

$('#tag-input').keydown(function(event) {
  if (event.keyCode === 13) {
    var tag = $('<div class="chip"></div>').text($(this).val());
    tag.append($('<i class="close material-icons">close</i>'));
    $('.chips').append(tag);
    $(this).val('');
  }
});

这段代码中，我们为输入框添加了按键事件监听器，当用户按下回车键时，会触发添加标签的操作。我们创建了一个新的标签元素，并将用户输入的文本作为标签内容。然后，我们将标签添加到标签容器中，并清空输入框的内容。

现在，我们已经实现了一个可添加标签的效果，如下图所示：

4. 总结

通过本文的教程，我们学习了如何使用 Material Design 实现标签效果。我们实现了一个基础标签和一个可添加标签的效果，并添加了相应的样式和事件监听器。通过这些示例，我们可以更好地理解 Material Design 的设计风格和开发方法，为我们的前端开发工作提供了一些指导意义。

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