menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

选择控件

选择控件包括复选框、单选框和开/关切换。

调用方式

选择控件使用纯 CSS 编写,只需编写 HTML 代码即可生效。

色彩

使用强调色。

样式

复选框

Example
<label class="mdui-checkbox">
  <input type="checkbox"/>
  <i class="mdui-checkbox-icon"></i>
  默认不选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" checked/>
  <i class="mdui-checkbox-icon"></i>
  默认选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled/>
  <i class="mdui-checkbox-icon"></i>
  禁用,且不选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" disabled checked/>
  <i class="mdui-checkbox-icon"></i>
  禁用,且选中
</label>

<label class="mdui-checkbox">
  <input type="checkbox" id="indeterminate-demo1"/>
  <i class="mdui-checkbox-icon"></i>
  不确定状态
</label>
<script>
  // indeterminate 属性只能通过 JavaScript 设置
  document.getElementById('indeterminate-demo1').indeterminate = true;
</script>

<label class="mdui-checkbox">
  <input type="checkbox" disabled id="indeterminate-demo2"/>
  <i class="mdui-checkbox-icon"></i>
  禁用,且不确定状态
</label>
<script>
  document.getElementById('indeterminate-demo2').indeterminate = true;
</script>

单选框

Example
<form>

  <label class="mdui-radio">
    <input type="radio" name="group1"/>
    <i class="mdui-radio-icon"></i>
    默认不选中
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" checked/>
    <i class="mdui-radio-icon"></i>
    默认选中
  </label>

  <label class="mdui-radio">
    <input type="radio" name="group1" disabled/>
    <i class="mdui-radio-icon"></i>
    禁用,且不选中
  </label>

</form>

<form>
  <label class="mdui-radio">
    <input type="radio" name="group1" disabled checked/>
    <i class="mdui-radio-icon"></i>
    禁用,且选中
  </label>
</form>

开/关切换

Example
<label class="mdui-switch">
  <input type="checkbox"/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" checked/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled/>
  <i class="mdui-switch-icon"></i>
</label>

<label class="mdui-switch">
  <input type="checkbox" disabled checked/>
  <i class="mdui-switch-icon"></i>
</label>

CSS 类名列表

类名效果
.mdui-checkbox定义复选框。
.mdui-checkbox-icon定义复选框内的图标。
.mdui-radio定义单选框。
.mdui-radio-icon定义单选框内的图标。
.mdui-switch定义开/关切换。
.mdui-switch-icon定义开/关切换内的图标。