## mo-switch
> 單選類，僅可用于`label + input[checkbox]` 標簽上
如果要禁用，只需要給`input[checkbox`添加`disabled`屬性；
如果要選中，只需要給`input[checkbox`添加`checked`屬性；
文字label必須使用`span`標簽包裹，并且位于`icon`之后
| 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);
}
```
