Formular: Switch

Das Pattern Switch schaltet den Zustand einer Einstellung ein oder aus.

Varianten

Formular: Switch

Vorschau

Code

<wm-switch name="optionen" required label="Cookies akzeptieren" id="switch"></wm-switch>

Dev

Interaktive Demo

Vorschau

Code

<wm-switch data-demo-pattern="wm-switch-preview" label="Cookies akzeptieren" id="switchCode"></wm-switch>

Weitere Beispiele

Formular: Switch mit Events (siehe Konsole)

Vorschau

Code

<wm-switch name="option" required label="Cookies akzeptieren" id="switching"></wm-switch>
<script>
    const switchButton = document.querySelector('#switching');
    console.log(switchButton);
    switchButton.addEventListener('wm-focus', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    switchButton.addEventListener('wm-switched', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    switchButton.addEventListener('wm-change', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    switchButton.addEventListener('wm-blur', e => {
      console.log(e.type)
      console.log(e.detail)
    })
    switchButton.addEventListener('wm-invalid', e => {
      console.log(e.type)
      console.log(e.detail)
    })
  </script>

Formular: Switch Disabled

Vorschau

Code

<wm-switch name="option" required label="Cookies akzeptieren" disabled></wm-switch>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Switch/Switch.js" type="module"></script>

JavaScript

import { Switch } from './wienermelange/assets/js/components/Switch/Switch.js';

Eigenschaften

Eigenschaften
Eigenschaft	Werte	Default
`checked`	`boolean`	`false`
`errormessage`	`string`	`""`
`summaryErrormessage`	`string`	`""`
`type`	`string`	`"switch"`
`_hasInteracted`	`boolean`	`false`

Slots

Name	Beschreibung
`default`	Text

Methoden

Eigenschaft	Optionen	Argumente
`_toggle`
`showError`
`clearError`		/
`formResetCallback`	Form reset callback - called by parent forms Provides standard reset behavior	/
`_handleChange`
`formDisabledCallback`	Called when the element's form sets the disabled state	Whether the control should be disabled (`boolean`)
`_dispatchFormEvent`

Events

Event	Beschreibung	Rückgabewert

`eventName`
`blur`
`focus`
`invalid`
`reset`

CSS API

Property	Beschreibung
`--switch-background-color`	Hintergrundfarbe inaktiv
`--switch-background-color--active`	Hintergrundfarbe aktiv
`--switch-background-knob-color`	Hintergrundfarbe des Reglers
`--switch-border-color`	Farbe des Rahmens

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at