開關組件 · real-admin(jq版+vue.js)

## 帶ON/OFF文字 ![](https://img.kancloud.cn/fe/d0/fed0c46f6f03bcd4b90a14253feb8011_244x42.png) ### 1、 ``` <input class="real-switch real-onoff" type="checkbox"> ``` ### 2、 ``` <input class="real-switch real-onoff" type="checkbox" checked="checked"> ``` ## 普通樣式 ![](https://img.kancloud.cn/61/3d/613df814870c777ca09de8ed2784a60a_234x40.png) ### 1、 ``` <input class="real-switch" type="checkbox"> ``` ### 2、 ``` <input class="real-switch" type="checkbox" checked="checked"> ``` ## 自定義文字描述 ![](https://img.kancloud.cn/a3/37/a337c815bda3be74be292652d48ca705_287x42.png) ### 1、 ``` <span class="real-switch-tip"><label><input type="checkbox"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> ``` ### 2、 ``` <span class="real-switch-tip"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> ``` ## 其他顏色 ![](https://img.kancloud.cn/f9/00/f9001d684d0055f0c3de795f545d1622_946x48.png) ~~~ <input class="real-switch real-blue" type="checkbox" checked="checked"> <input class="real-switch real-red" type="checkbox" checked="checked"> <input class="real-switch real-yellow" type="checkbox" checked="checked"> <input class="real-switch real-green" type="checkbox" checked="checked"> <input class="real-switch real-black" type="checkbox" checked="checked"> <input class="real-switch real-onoff real-blue" type="checkbox" checked="checked"> <input class="real-switch real-onoff real-red" type="checkbox" checked="checked"> <input class="real-switch real-onoff real-yellow" type="checkbox" checked="checked"> <input class="real-switch real-onoff real-green" type="checkbox" checked="checked"> <input class="real-switch real-onoff real-black" type="checkbox" checked="checked"> <span class="real-switch-tip real-blue"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> <span class="real-switch-tip real-red"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> <span class="real-switch-tip real-yellow"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> <span class="real-switch-tip real-green"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> <span class="real-switch-tip real-black"><label><input type="checkbox" checked="checked"><em></em><span>是否發射核彈</span><span>發射！！</span> </label> </span> ~~~