Foundation Schalter
Der Schalter wechselt bei einem Mausklick (Fingertipp) zwischen den Zuständen "Ein" und "Aus":
Verwendung des Umschalters<div class="switch">Create.<div>Fügen Sie darin ... mit einer eindeutigen id hinzu<input type="checkbox"> ，
<label>Das for-Attribut des Elements muss übereinstimmen mit<input type="checkbox">der id von ...:
Beispiel
<div class="switch">
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
<input id="mySwitch" type="checkbox">
<label for="mySwitch"></label>
</div>
Selbst ausprobieren »
Schaltergröße
Nutzung.large, .smalloder.tinyKlasse zum Festlegen der Schaltergröße:
Beispiel
<div class="switch large">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
<div class="switch">...</div>
<div class="switch small">...</div>
<div class="switch tiny">...</div>
Selbst ausprobieren »
Abgerundeter Umschalter
Nutzung.radiusund.roundVerwenden Sie die Klasse, um den abgerundeten Umschalter festzulegen:
Beispiel
<div class="switch">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
<div class="switch radius">...</div>
<div class="switch round">...</div>
Selbst ausprobieren »
Schaltergruppe
Sie können eine einzelne Option festlegen, indem Sie ein Optionsfeld auswählen.Hinweis:Beachten Sie die Optionen jeweilsnameDie Attribute müssen konsistent sein (im Beispiel ist es "myGroup").
Beispiel
<div class="switch">
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
<input id="mySwitch1" type="radio" name="myGroup">
<label for="mySwitch1"></label>
</div>
<div class="switch">
<input id="mySwitch2" type="radio" name="myGroup" checked>
<label for="mySwitch2"></label>
</div>
Selbst ausprobieren »