Semantic-UI 下拉标签内容

Semantic-UI 是一个人性化的开源 UI 库，提供了丰富的样式和交互效果，并且易于使用和扩展。下拉标签内容是 Semantic-UI 中常用的组件之一，可以展示多个选项供用户选择，下面将介绍如何使用 Semantic-UI 中的下拉标签内容组件。

引入 Semantic-UI

要使用 Semantic-UI，需要在 HTML 中引入相应的 CSS 和 JS 文件，可以选择使用官方提供的 CDN 或者下载到本地使用。在 HTML 中引入 Semantic-UI 的代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

下拉标签内容的基本用法

Semantic-UI 提供了 dropdown 和 selection 两个类来实现下拉标签内容的功能，其中 dropdown 用来创建下拉框本身，selection 用来创建选项。下面是基本的下拉标签内容代码。

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu">
    <div class="item" data-value="male">Male</div>
    <div class="item" data-value="female">Female</div>
  </div>
</div>

上面的代码中，使用了 selection dropdown 类创建了一个下拉标签内容，input 标签用于存储选项的值，i 标签用于表示下拉箭头，default text 指定了默认显示的文本，menu 用来存放下拉选项，其中的 item 标签表示一个选项，data-value 属性表示选项的值。

下拉标签内容的扩展用法

Semantic-UI 提供了多种选项来进行下拉标签内容的扩展，如可多选、可搜索、可分组等，下面分别介绍。

多选

要创建可多选的下拉标签内容，需要在 selection dropdown 类中添加 multiple，并且选项也需要添加 multiple，以下是实现多选的代码。

<div class="ui fluid multiple search selection dropdown">
  <input type="hidden" name="skills">
  <i class="dropdown icon"></i>
  <div class="default text">Skills</div>
  <div class="menu">
    <div class="item" data-value="html" data-text="HTML">HTML</div>
    <div class="item" data-value="css" data-text="CSS">CSS</div>
    <div class="item" data-value="js" data-text="JavaScript">JavaScript</div>
    <div class="item" data-value="php" data-text="PHP">PHP</div>
    <div class="item" data-value="python" data-text="Python">Python</div>
  </div>
</div>

在上面的代码中，我们添加了 multiple 类以实现多选功能，同时在选项中添加了 data-text 属性以表示选项的文本，这样在选中多选时，界面将会显示选中的每个文本。

搜索

要创建可搜索的下拉标签内容，需要在 selection dropdown 类中添加 search，以下是实现搜索的代码。

<div class="ui fluid search selection dropdown">
  <input type="hidden" name="skills">
  <i class="dropdown icon"></i>
  <div class="default text">Skills</div>
  <div class="menu">
    <div class="item" data-value="html" data-text="HTML">HTML</div>
    <div class="item" data-value="css" data-text="CSS">CSS</div>
    <div class="item" data-value="js" data-text="JavaScript">JavaScript</div>
    <div class="item" data-value="php" data-text="PHP">PHP</div>
    <div class="item" data-value="python" data-text="Python">Python</div>
  </div>
</div>

在上面的代码中，我们添加了 search 类以实现搜索功能，当用户输入时，将会在下拉选项中过滤出符合条件的选项。

分组

要创建可分组的下拉标签内容，需要添加 .menu > .header 标签创建分组的标题，以下是实现分组的代码。

<div class="ui fluid search selection dropdown">
  <input type="hidden" name="skills">
  <i class="dropdown icon"></i>
  <div class="default text">Skills</div>
  <div class="menu">
    <div class="header">Frontend</div>
    <div class="item" data-value="html" data-text="HTML">HTML</div>
    <div class="item" data-value="css" data-text="CSS">CSS</div>
    <div class="item" data-value="js" data-text="JavaScript">JavaScript</div>
    <div class="header">Backend</div>
    <div class="item" data-value="php" data-text="PHP">PHP</div>
    <div class="item" data-value="python" data-text="Python">Python</div>
  </div>
</div>

在上面的代码中，我们通过添加 .header 标签来创建分组的标题，这样可以让选项更加清晰明了。

总结

以上就是 Semantic-UI 下拉标签内容的介绍，我们学习了如何使用基本的下拉标签内容，以及如何使用多选、搜索和分组等扩展功能，希望对你有所帮助。如果你想深入学习更多 Semantic-UI 的内容，可以参考官方文档：https://semantic-ui.com/。