Semantic-UI 复选框单选类型

在Semantic-UI中，复选框和单选框是可以轻松使用的。这里将介绍如何定义和使用复选框和单选框类型。

复选框

使用Semantic-UI的复选框，只需在HTML代码中使用<div class="ui checkbox">元素。例如：

<div class="ui checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>我同意条款</label>
</div>

复选框有6种不同的状态，包括:

• 已选中（checked）
• 禁用状态（disabled）
• 部分选中（indeterminate）
• 用户正在交互（focus）
• 用户使用键盘进行导航（tabbing）
• 输入了非法数据（error）

这些状态可以通过修改相应的类来改变。例如：

<div class="ui checked checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>已选中</label>
</div>

<div class="ui disabled checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>禁用状态</label>
</div>

<div class="ui checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>部分选中</label>
</div>

<div class="ui focus checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>用户正在交互</label>
</div>

<div class="ui tabbing checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>用户使用键盘进行导航</label>
</div>

<div class="ui error checkbox">
  <input type="checkbox" tabindex="0" class="hidden">
  <label>输入了非法数据</label>
</div>

单选框

使用Semantic-UI的单选框，只需在HTML代码中使用<div class="ui radio">元素。例如：

<div class="inline field">
  <div class="ui radio checkbox">
    <input type="radio" name="frequency" tabindex="0" class="hidden">
    <label>每周</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="frequency" tabindex="0" class="hidden">
    <label>每月</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="frequency" tabindex="0" class="hidden">
    <label>每年</label>
  </div>
</div>

单选框的属性name指定了一组单选框，只有同一组中有且仅有一个单选框被选中。

和复选框一样，单选框也可以使用类来改变样式。例如：

<div class="ui radio checkbox">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>高清</label>
</div>

<div class="ui radio checkbox checked">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>高质量</label>
</div>

<div class="ui radio checkbox disabled">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>禁用状态</label>
</div>

<div class="ui radio checkbox">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>部分选中</label>
</div>

<div class="ui radio checkbox focus">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>用户正在交互</label>
</div>

<div class="ui radio checkbox">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>用户使用键盘进行导航</label>
</div>

<div class="ui radio checkbox error">
  <input type="radio" name="frequency" tabindex="0" class="hidden">
  <label>输入了非法数据</label>
</div>

结论

Semantic-UI使得复选框和单选框的创建和样式化十分简单和容易。和其他组件一样，只需要将HTML代码和添加相应的类就可以改变它们的外观和行为。