Switch

Die Switch-Komponente schaltet den Ein-/Aus-Zustand einer einzelnen Option um. Durch die intuitive Interaktion lassen sich Einstellungen einfach anpassen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/switch.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Switch } from 'mdui/components/switch.js';

Beispiel:

<mdui-switch></mdui-switch>

Sie können über das Attribut unchecked-icon das Material Icons-Symbol für den nicht ausgewählten Zustand und über checked-icon das Symbol für den ausgewählten Zustand festlegen. Sie können dies auch über die Slots unchecked-icon und checked-icon tun.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert den Switch.
`checked`	`checked`	`boolean`	`false`
Setzt den Switch in den aktivierten Zustand.
	`defaultChecked`	`boolean`	`false`
Der standardmäßig aktivierte Zustand. Der Switch setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Der Name des Material Icons für den nicht aktivierten Zustand. Alternativ können Sie `slot="unchecked-icon"` verwenden.
`checked-icon`	`checkedIcon`	`string`	-
Der Name des Material Icons für den aktivierten Zustand. Alternativ können Sie `slot="checked-icon"` verwenden. Standardmäßig wird das `check`-Icon verwendet; das Setzen einer leeren Zeichenfolge entfernt das Standard-Icon.
`required`	`required`	`boolean`	`false`
Der Switch muss aktiviert sein, bevor das Formular gesendet wird.
`form`	`form`	`string`	-
Verknüpft den Switch mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Switch sein übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es dem Switch, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem er verschachtelt ist.
`name`	`name`	`string`	`''`
Der Name des Switches, der mit Formulardaten übermittelt wird.
`value`	`value`	`string`	`'on'`
Der Wert des Switches, der mit Formulardaten übermittelt wird.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.

Methoden

Name	Parameter	Rückgabewert
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn der Switch den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Switch den Fokus verliert.
`change`
Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
`input`
Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
`unchecked-icon`
Element für den nicht aktivierten Zustand.
`checked-icon`
Element für den aktivierten Zustand.

CSS Parts

Name
`track`
Spur.
`thumb`
Daumen.
`unchecked-icon`
Icon für den nicht aktivierten Zustand.
`checked-icon`
Icon für den aktivierten Zustand.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Spur. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--shape-corner-thumb`
Der Eckradius des Icon-Containers. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

Snackbar

Nächste Seite

Tabs

Switch

Verwendung

Beispiele

Ausgewählter Zustand

Deaktivierter Zustand

Symbol