beralih Yayasan
Switch klik mouse (jari menekan) di bawah beralih antara "On" dan "Off" menyatakan:
Beralih menggunakan <div class="switch"> Buat. <div> menambahkan dengan id unik dalam <input type="checkbox"> , <label> elemen untuk atribut perlu <input type="checkbox"> id pertandingan:
contoh
<Class Div = "switch">
<Input id = "mySwitch" Jenis = "checkbox">
<Label untuk = "mySwitch"> </ label>
</ Div>
<Input id = "mySwitch" Jenis = "checkbox">
<Label untuk = "mySwitch"> </ label>
</ Div>
Coba »
saklar ukuran
Gunakan .large , .small atau .tiny kelas untuk mengatur ukuran switch:
contoh
<Div class = "beralih besar" > ... </ div>
<Class Div = "switch"> ... </ div>
<Div class = "beralih kecil" > ... </ div>
<Div class = "beralih kecil" > ... </ div>
<Class Div = "switch"> ... </ div>
<Div class = "beralih kecil" > ... </ div>
<Div class = "beralih kecil" > ... </ div>
Coba »
fillet saklar
Gunakan .radius dan .round kelas untuk mengatur saklar fillet:
contoh
<Class Div = "switch"> ... </ div>
<Class Div = "radius switch" > ... </ div>
<Class Div = "switch round" > ... </ div>
<Class Div = "radius switch" > ... </ div>
<Class Div = "switch round" > ... </ div>
Coba »
saklar kelompok
Anda dapat mengatur pilihan individu dengan menetapkan tombol radio (radio). Catatan: Perhatikan bahwa setiap pilihan name atribut harus sama (misalnya "myGroup").
contoh
<Class Div = "switch">
<Input id = "mySwitch1" Jenis = "radio" name = "myGroup">
<Label untuk = "mySwitch1"> </ label>
</ Div>
<Class Div = "switch">
<Input id = "mySwitch2" Jenis = "radio" name = "myGroup" diperiksa>
<Label untuk = "mySwitch2"> </ label>
</ Div>
<Input id = "mySwitch1" Jenis = "radio" name = "myGroup">
<Label untuk = "mySwitch1"> </ label>
</ Div>
<Class Div = "switch">
<Input id = "mySwitch2" Jenis = "radio" name = "myGroup" diperiksa>
<Label untuk = "mySwitch2"> </ label>
</ Div>
Coba »