Handbuch wien.gv.at
Startseite wien.gv.at
Menü

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

wm-switch

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
label Setzt die Beschriftung des Schalters. String "Aktivieren"
checked boolean false
disabled Whether the component is disabled Boolean false
error Current error message String ""
errormessage string ""
summaryErrormessage string ""
validate Whether to validate on input Boolean false
showErrors Whether to show validation errors immediately Boolean false
type string "switch"
value Wert des Elements String "0"
defaultValue Default value of the component String ''
requiredText Gibt den lokalisierten Text für den Pflichtfeld-Indikator zurück. Kann durch Setzen der requiredText-Eigenschaft überschrieben werden. Fällt auf den lokalisierten Standard "Pflichtfeld" zurück, falls nicht gesetzt. Öffentliche Eigenschaft, die sich bei Sprachwechsel reaktiv aktualisiert. String "Pflichtfeld"
hideAsterisk Text statt Sternchen darstellen Boolean false
id optionale ID String leer
name Name-Attribute in HTML String leer
required Pflichtfeld Boolean false
hint Hinweis String leer

Slots

Name Beschreibung
default Text

Events

Event Beschreibung Rückgabewert
change
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