Amaze UI

Switch


开关选择器。

基础用法

Copy
<label class="am-switch">
    <input type="checkbox">
    <span class="am-switch-checkbox"></span>
</label>

<label class="am-switch am-switch-lg">
    <input type="checkbox">
    <span class="am-switch-checkbox"></span>
</label>

<script>
  $('.am-switch input[type=checkbox]').on('click',function(){
    if($(this).is(':checked')){
      alert('开启')
    }else{
      alert('关闭')
    }
  })
</script>

am-switch 同级添加 am-switch-lg 显示更大尺寸的开关。

文字和图标

Copy
<label class="am-switch">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox am-switch-text"></span>
</label>
<label class="am-switch">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox am-switch-ico"></span>
</label>

在要应用的开关上添加 .am-switch-text 或者 .am-switch-ico class。

禁用

Copy
<label class="am-switch">
    <input type="checkbox" disabled checked>
    <span class="am-switch-checkbox"></span>
</label>
<label class="am-switch">
    <input type="checkbox" disabled>
    <span class="am-switch-checkbox"></span>
</label>

在开关上添加 disabled 即可禁用。

不同的颜色

Copy
<label class="am-switch">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox"></span>
</label>
<label class="am-switch am-switch-secondary">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox"></span>
</label>
<label class="am-switch am-switch-success">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox"></span>
</label>
<label class="am-switch am-switch-warning">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox"></span>
</label>
<label class="am-switch am-switch-danger">
    <input type="checkbox" checked>
    <span class="am-switch-checkbox"></span>
</label>
  • .am-switch - 蓝色按钮
  • .am-switch-secondary - 浅蓝色按钮
  • .am-switch-success - 绿色按钮
  • .am-switch-warning - 橙色按钮
  • .am-switch-danger - 红色按钮