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

Eigenschaften

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

Slots

Name	Beschreibung
`default`	Text

Methoden

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

Events

Event	Beschreibung	Rückgabewert

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

Kontakt

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

handbuch@ma53.wien.gv.at