Semantic-UI Dropdown Types

下拉列表是用户界面中常用的选择组件。在Semantic-UI中，使用Dropdown组件可以轻松创建高度自定义化的下拉列表。

下拉列表类型

下拉列表有多种类型，下面将逐个介绍。

基本下拉列表

基本下拉列表是最常见的下拉列表类型，也是Dropdown组件的默认类型。

<div class="ui dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="male">男</div>
    <div class="item" data-value="female">女</div>
  </div>
</div>

• ui dropdown：指定一个基本下拉列表。
• input type="hidden"：用于存储选中的值。
• menu：下拉菜单的容器，内部每个item均代表一个可选项。

文本下拉列表

文本下拉列表用于展示固定的文本。该类型下拉列表无法选择。

<div class="ui selection dropdown">
  <input type="hidden" name="text">
  <i class="dropdown icon"></i>
  <div class="text">请选择</div>
  <div class="menu">
    <div class="header">选择一项</div>
    <div class="item">第一项</div>
    <div class="item">第二项</div>
  </div>
</div>

• ui selection dropdown：指定一个文本下拉列表。
• text：用于展示选中的文本。

按钮下拉列表

按钮下拉列表将下拉列表呈现为一个按钮。该按钮选择后，将相应地显示选择的值。

<div class="ui floating dropdown labeled icon button">
  <i class="world icon"></i>
  <span class="text">语言选择</span>
  <div class="menu">
    <div class="item">中文</div>
    <div class="item">英文</div>
  </div>
</div>

• ui floating dropdown labeled icon button：指定一个按钮下拉列表。
• icon：按钮的图标。

多选下拉列表

多选下拉列表用于允许用户选择多个选项。

<div class="ui fluid multiple search selection dropdown">
  <input type="hidden" name="tags">
  <i class="dropdown icon"></i>
  <div class="default text">选择标签</div>
  <div class="menu">
    <div class="item" data-value="javascript">JavaScript</div>
    <div class="item" data-value="html">HTML</div>
    <div class="item" data-value="css">CSS</div>
    <div class="item" data-value="java">Java</div>
    <div class="item" data-value="python">Python</div>
  </div>
</div>

• fluid：将下拉列表的宽度设置为100%。
• multiple：指定该下拉列表为多选下拉列表。
• search：在选项过多的情况下，为选项提供搜索框。

结论

通过使用Semantic-UI的Dropdown组件，可以轻松创建高度自定义化的下拉列表。不同类型的下拉列表可以满足各种需求。在实际项目中，可以根据需求选择不同类型的下拉列表。