Foundation-Schalter
Switch ist ein Mausklick (Fingertapping) unter Umschalten zwischen "Ein" und "Aus" heißt es:
Wechseln Sie zu verwenden <div class="switch"> erstellen. <div> hinzugefügt mit einer eindeutigen ID innerhalb des <input type="checkbox"> , <label> Element für Attribute müssen <input type="checkbox"> ID Matches:
Beispiele
<Div class = "Schalter">
<Input id = "mySwitch" type = "checkbox">
<Label for = "mySwitch"> </ label>
</ Div>
<Input id = "mySwitch" type = "checkbox">
<Label for = "mySwitch"> </ label>
</ Div>
Versuchen »
Schaltergröße
Verwenden Sie .large , .small oder .tiny Klasse , um die Schaltergröße einstellen:
Beispiele
<Div class = "switch large" > ... </ div>
<Div class = "Schalter"> ... </ div>
<Div class = "wechseln small" > ... </ div>
<Div class = "wechseln winzige" > ... </ div>
<Div class = "Schalter"> ... </ div>
<Div class = "wechseln small" > ... </ div>
<Div class = "wechseln winzige" > ... </ div>
Versuchen »
Fillet Schalter
Verwenden Sie .radius und .round Klasse das Filet - Schalter eingestellt werden :
Beispiele
<Div class = "Schalter"> ... </ div>
<Div class = "-Schalter Radius" > ... </ div>
<Div class = "switch round" > ... </ div>
<Div class = "-Schalter Radius" > ... </ div>
<Div class = "switch round" > ... </ div>
Versuchen »
Schaltgruppe
Sie können durch Einstellen des Radiobutton (Radio) Einzeloptionen. Hinweis: Beachten Sie, dass jede Option name Attribut muss gleich sein (zum Beispiel "myGroup").
Beispiele
<Div class = "Schalter">
<Input id = "mySwitch1" type = "radio" name = "myGroup">
<Label for = "mySwitch1"> </ label>
</ Div>
<Div class = "Schalter">
<Input id = "mySwitch2" type = "radio" name = "myGroup" geprüft>
<Label for = "mySwitch2"> </ label>
</ Div>
<Input id = "mySwitch1" type = "radio" name = "myGroup">
<Label for = "mySwitch1"> </ label>
</ Div>
<Div class = "Schalter">
<Input id = "mySwitch2" type = "radio" name = "myGroup" geprüft>
<Label for = "mySwitch2"> </ label>
</ Div>
Versuchen »