语义 UI 列表选择变体

语义 UI 是一种基于语义的用户界面设计，旨在使用户界面与用户语言更加一致。UI 控件的名称、以及 UI 控件的配置选项都应该是简单且可理解的。

列表选择是 UI 中的一种最基本的控件，用于从多个选项中进行选择。在语义 UI 中，正确使用列表选择的变体可以使 UI 更加符合用户的期望。

单选列表

单选列表是一种只允许用户选择一个选项的列表。单选列表通常使用单选按钮来表示选项，其中只有一个选项可以被选择。

<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue

在这个例子中，我们创建了一个用于选择颜色的单选列表。注意，所有单选按钮都归属于同一个名称 "color"。

多选列表

多选列表允许用户选择一个或多个选项。多选列表通常使用复选框来表示选项。

<input type="checkbox" name="color" value="red">Red
<input type="checkbox" name="color" value="green">Green
<input type="checkbox" name="color" value="blue">Blue

在这个例子中，我们创建了一个用于选择颜色的多选列表。注意，所有复选框都归属于同一个名称 "color"。

下拉单选列表

下拉单选列表是一种更加节省空间的单选列表。在下拉单选列表中，用户可以点击列表下拉框选择一个选项。当用户选择一个选项后，下拉框会自动折叠回去。

<select name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

在这个例子中，我们创建了一个用于选择颜色的下拉单选列表。

下拉多选列表

下拉多选列表是一种更加节省空间的多选列表。在下拉多选列表中，用户可以点击列表下拉框选择一个或多个选项。当用户选择一个或多个选项后，下拉框会自动折叠回去。

<select name="color" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

在这个例子中，我们创建了一个用于选择颜色的下拉多选列表。注意，需要添加属性 "multiple" 来表示这是一个多选列表。