Switch foundation 기본 스위치 코드보기 <div class="switch"> <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch"> <label class="switch-paddle" for="exampleSwitch"> <span class="show-for-sr">스위치</span> </label> </div> ND 기본 스위치 스위치 코드보기 <!-- android style --> <div class="nd-switch"> <input id="ndSwitch1" type="checkbox" name="ndSwitch"> <label for="ndSwitch1"> <span class="show-for-sr">스위치</span> </label> </div> <!-- ios style --> <div class="nd-switch for-ios"> <input id="ndSwitch2" type="checkbox" name="ndSwitch2"> <label for="ndSwitch2"> <span class="show-for-sr">스위치</span> </label> </div> 크기 tiny small medium large tiny small medium large group size group size group size 코드보기 <!-- basic //--> <div class="switch-group"> <div class="nd-switch tiny"> <input id="switchSize1" type="checkbox" name="switchSize1"> <label for="switchSize1"> <span class="show-for-sr">tiny</span> </label> </div> <div class="nd-switch small"> <input id="switchSize2" type="checkbox" name="switchSize2"> <label for="switchSize2"> <span class="show-for-sr">small</span> </label> </div> <div class="nd-switch"> <input id="switchSize3" type="checkbox" name="switchSize3"> <label for="switchSize3"> <span class="show-for-sr">medium</span> </label> </div> <div class="nd-switch large"> <input id="switchSize4" type="checkbox" name="switchSize4"> <label for="switchSize4"> <span class="show-for-sr">large</span> </label> </div> </div> <!--// basic --> <!-- group size //--> <div class="switch-group tiny"> <div class="nd-switch"> <input id="switchSize21" type="checkbox" name="switchSize21"> <label for="switchSize21"> <span class="show-for-sr">group size</span> </label> </div> <div class="nd-switch"> <input id="switchSize22" type="checkbox" name="switchSize22"> <label for="switchSize22"> <span class="show-for-sr">group size</span> </label> </div> <div class="nd-switch"> <input id="switchSize23" type="checkbox" name="switchSize23"> <label for="switchSize23"> <span class="show-for-sr">group size</span> </label> </div> </div> <!--// group size --> 그룹 그룹1 그룹2 그룹3 그룹1 그룹2 그룹3 코드보기 <!-- basic group //--> <div class="switch-group"> <div class="nd-switch"> <input id="groups1" type="checkbox" name="groups1" checked> <label for="groups1"> <span class="show-for-sr">그룹1</span> </label> </div> <div class="nd-switch"> <input id="groups2" type="checkbox" name="groups2" checked> <label for="groups2"> <span class="show-for-sr">그룹2</span> </label> </div> <div class="nd-switch"> <input id="groups3" type="checkbox" name="groups3" checked> <label for="groups3"> <span class="show-for-sr">그룹3</span> </label> </div> </div> <!-- ios style group //--> <div class="switch-group for-ios"> <div class="nd-switch"> <input id="groups11" type="checkbox" name="groups11" checked> <label for="groups11"> <span class="show-for-sr">그룹1</span> </label> </div> <div class="nd-switch"> <input id="groups12" type="checkbox" name="groups12" checked> <label for="groups12"> <span class="show-for-sr">그룹2</span> </label> </div> <div class="nd-switch"> <input id="groups13" type="checkbox" name="groups13" checked> <label for="groups13"> <span class="show-for-sr">그룹3</span> </label> </div> </div> 컬러 basic secondary success warning alert pink basic secondary success warning alert pink pink1 pink2 pink3 코드보기 <!-- basic //--> <div class="nd-switch"> <input id="colored1" type="checkbox" name="colored1" checked> <label for="colored1"> <span class="show-for-sr">basic</span> </label> </div> <!--// basic --> <!-- secondary //--> <div class="nd-switch secondary"> <input id="colored2" type="checkbox" name="colored2" checked> <label for="colored2"> <span class="show-for-sr">secondary</span> </label> </div> <!--// secondary --> <!-- success //--> <div class="nd-switch success"> <input id="colored3" type="checkbox" name="colored3" checked> <label for="colored3"> <span class="show-for-sr">success</span> </label> </div> <!--// success --> <!-- warning //--> <div class="nd-switch warning"> <input id="colored4" type="checkbox" name="colored4" checked> <label for="colored4"> <span class="show-for-sr">warning</span> </label> </div> <!--// warning --> <!-- alert //--> <div class="nd-switch alert"> <input id="colored5" type="checkbox" name="colored5" checked> <label for="colored5"> <span class="show-for-sr">alert</span> </label> </div> <!--// alert --> <!-- nd-pink //--> <div class="nd-switch nd-pink"> <input id="colored6" type="checkbox" name="colored6" checked> <label for="colored6"> <span class="show-for-sr">pink</span> </label> </div> <!--// nd-pink --> <!-- group color //--> <div class="switch-group nd-pink"> <div class="nd-switch"> <input id="colored21" type="checkbox" name="colored21" checked> <label for="colored21"> <span class="show-for-sr">pink1</span> </label> </div> <div class="nd-switch"> <input id="colored22" type="checkbox" name="colored22" checked> <label for="colored22"> <span class="show-for-sr">pink2</span> </label> </div> <div class="nd-switch"> <input id="colored33" type="checkbox" name="colored33" checked> <label for="colored33"> <span class="show-for-sr">pink3</span> </label> </div> </div> <!--// group color --> 라디오 스위치 스위치 코드보기 <!-- radio --> <div class="nd-switch"> <input id="radioSwitch1" type="radio" name="radioSwitch" checked> <label for="radioSwitch1"> <span class="show-for-sr">스위치</span> </label> </div> <div class="nd-switch"> <input id="radioSwitch2" type="radio" name="radioSwitch"> <label for="radioSwitch2"> <span class="show-for-sr">스위치</span> </label> </div> 레이블 설정하시겠습니까? 스위치 블루투스 스위치 wifi 스위치 NFC 스위치 코드보기 <!-- lable //--> <div class="nd-switch for-label"> <span class="labels cell">설정하시겠습니까?</span> <span class="cell"> <input id="labelSwitch1" type="checkbox" name="labelSwitch1" checked> <label for="labelSwitch1"> <span class="show-for-sr">스위치</span> </label> </span> </div> <!--// lable --> <!-- lable group //--> <div class="switch-group for-label"> <div class="nd-switch secondary"> <span class="labels cell">블루투스</span> <span class="cell"> <input id="labelSwitch11" type="checkbox" name="labelSwitch11" checked> <label for="labelSwitch11"> <span class="show-for-sr">스위치</span> </label> </span> </div> <div class="nd-switch success"> <span class="labels cell">wifi</span> <span class="cell"> <input id="labelSwitch12" type="checkbox" name="labelSwitch12" checked> <label for="labelSwitch12"> <span class="show-for-sr">스위치</span> </label> </span> </div> <div class="nd-switch warning"> <span class="labels cell">NFC</span> <span class="cell"> <input id="labelSwitch13" type="checkbox" name="labelSwitch13" checked> <label for="labelSwitch13"> <span class="show-for-sr">스위치</span> </label> </span> </div> </div> <!--// lable group -->