Semantic-UI Dropdown 浮动类型

Semantic-UI 是一款流行的 UI 库，Dropdown 是其中重要的组件之一。Dropdown 提供了多种类型，其中浮动类型是最常用的之一。

浮动类型

Dropdown 能够以浮动形式显示在页面中，当用户点击时，选项卡会向下展开。在浮动类型中，Dropdown 能够与其他 UI 组件进行组合。通过添加类名 floating，即可将 Dropdown 设置为浮动类型。

<div class="ui dropdown floating">
  <div class="text">选项</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">选项 1</div>
    <div class="item">选项 2</div>
    <div class="item">选项 3</div>
  </div>
</div>

使用方法

引入 Semantic-UI 库

首先，在页面中需要引入 Semantic-UI 库。可以使用以下方法之一：

• 从官方网站下载 CSS 和 JS 文件，手动引入页面。
• 使用 CDN 引入。

在本例中，使用 CDN 引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">

<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>

添加 HTML 代码

接下来，添加 HTML 代码。需要准备一个包裹 Dropdown 的 div 元素。

<div class="ui dropdown floating">
  <div class="text">选项</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">选项 1</div>
    <div class="item">选项 2</div>
    <div class="item">选项 3</div>
  </div>
</div>

初始化 Dropdown

最后，在 JavaScript 中初始化 Dropdown。

$('.ui.dropdown').dropdown();

总结

浮动类型 Dropdown 是一种常用的 UI 组件，能够以独特的方式展示选项。组件能够与其他 Semantic-UI 组件进行组合，使得应用程序的用户界面更加丰富多彩。