## mo-switch > 单选类,仅可用于`label + input[checkbox]` 标签上 如果要禁用,只需要给`input[checkbox`添加`disabled`属性; 如果要选中,只需要给`input[checkbox`添加`checked`属性; 文字label必须使用`span`标签包裹,并且位于`icon`之后 ![](https://box.kancloud.cn/dbd0fc58825efb93103bbfed8c5400e4_398x393.png) | className | 描述 | 说明 | | --- | --- | --- | | `mo-switch` | 默认样式 | -- | | `mo-switch--primary` | 主色调 | `#0275d8` | | `mo-switch--positive` | 积极色 | `#5cb85c` | | `mo-switch--negative` | 消极色 | `#d9534f` | | `mo-switch--small` | 小尺寸 | 30x18 | | `mo-switch--large` | 大尺寸 | 50x30 | | `mo-switch--reverse` | 文字与icon反转位置 | 文字在前,icon在后 | ### 实例 ```html <label class="mo-switch"> <input type="checkbox" name="mo-switch"> <i class="icon"></i> <span>switch</span> </label> //disabled <label class="mo-switch"> <input type="checkbox" name="mo-switch" disabled> <i class="icon"></i> <span>switch</span> </label> //checked <label class="mo-switch"> <input type="checkbox" name="mo-switch" checked> <i class="icon"></i> <span>switch</span> </label> //reverse,此时文字label将出现在图标前面 <label class="mo-switch--reverse"> <input type="checkbox" name="mo-switch--reverse" checked> <i class="icon"></i> <span>switch reverse</span> </label> ``` ### 自定义 ``` scss @import './mixins/switch'; //自定义样式(颜色) .mo-switch--[style] { @include switchStyle($color); } //自定义尺寸 .mo-switch--[size] { @include switchSize ($width, $height); } ```