Switch
Ein Ein-/Ausschalter für eine Einstellung, mit dem Status daneben geschrieben. Es gilt, wenn die Person speichert, wie jedes Feld.
Auf dieser Seite
Playground
Zustand
Hintergrund
<label class="feitio-switch" data-on="An" data-off="Aus"><input type="checkbox" role="switch">E-Mail-Hinweise<span class="state">Aus</span></label>Wann verwenden
- Um eine Einstellung auf oder ab in einer Einstellungsseite umzudrehen: Erinnerungen, Benachrichtigung, Funktion.
Wann nicht verwenden
- Etwas zustimmen (Richtlinien, Berechtigungen): Checkbox.
- Zwischen Optionen wählen: Radios oder SegmentedControl.
Beispiele
In einem Einstellungsformular
Der Schalter ändert den geschriebenen Zustand sofort, aber die Einstellung wird erst angewendet, wenn die Person speichert; das Feedback zeigt im Formular an.
Code anzeigen
<label class="feitio-switch">
<input type="checkbox" role="switch" name="lembretes" checked>
Lembretes do dia
<span class="state">Ligado</span>
</label>States
Barrierefreiheit
- Es ist ein Checkbox mit
role="switch": Screenreader verkünden "on" oder "off". - Der Zustand wird daneben ebenfalls geschrieben: die Position des Punkts reicht nicht aus.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-switch" | auf dem <label> | Der Schalter, der Text und der Zustand. |
role="switch" | am Input | Screenreader verkünden on oder off. |
class="state" | der Zustand | "An" oder "Aus", in Worten. |