Weblog

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

Matthias Scharwies E-Mail-Adresse des Autors Homepage des Autors (Versionen)

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) ↩︎

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen