Switch 开关

用于两个互斥状态间的切换和选择。

适用：同一个对象两种对立状态的切换，如：开/关
不适用：非对立状态或多个对象之间的选择，此时应该用 Checkbox 或 Radio

通用原则

• 触发即生效，其本身带有提交的含义，使用时只需搭配文字解释上下文即可。
• 需明确表明当前所处状态
• 可搭配 tooltip 进一步解释操作
• 仅用于轻量级的快速的两种互斥状态间切换

构成

1. 把手：隐喻为可左右拨动的操作杆
2. 指示槽：把手的滑槽，配合把手明使用明确表明状态间关系

行为

四大状态

切换状态

• 当控件可用的时候，用户点击整个控件或鼠标拖动把手来切换状态
• 把手的移动配合指示槽的颜色变化示意状态切换成功
• 当控件不可用的时候，无任何可交互行为

样式

布局

<div class="input-group checkbox switch input-group-sm" >
    <label>
        <input type="checkbox"  ng-model="config.value">
        <span class="text"></span>
    </label>
</div>