Matthias Scharwies: <toggle-switch> - Kippschalter mit Custom Elements

Weblog

Entwurf: <toggle-switch> - Kippschalter mit Custom Elements

Matthias Scharwies E-Mail-Adresse des Autors Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Um z.B. Dark Mode manuell einzuschalten, verwendeten wir bis dato eine mit CSS gestaltete Checkbox. Dies funktioniert problemlos auch ohne JavaScript - trotzdem wäre es eleganter, eine eigene Lösung für solche Toggle-Schalter zu haben.

Es gibt bereits einen Vorschlag der WHATWG, der bereits in SafariTP implementiert ist. Dabei erhält die Checkbox ein neues switch-Attribut: <input type="checkbox" switch> [1]

Parallel schlägt die open-iu ein eigenes, natives switch-Element[2] vor:

<switch>
  <track>
    <toggled></toggled>
    <untoggled></untoggled>
  </track>
  <thumb></thumb>
</switch>

  1. Add switch attribute to the input element to allow for a two-state switch control. (github.com/whatwg) ↩︎

  2. Switch (Explainer) (open-ui.org) ↩︎

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln