Radio

Radios ermöglichen die Auswahl einer Option aus einer Gruppe. Es kann immer nur eine Option ausgewählt sein.

Verwendung

Importieren Sie die Komponenten nach Bedarf:

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf:

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

Beispiel:

Chinesisch

Englisch

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinesisch</mdui-radio>
  <mdui-radio value="english">Englisch</mdui-radio>
</mdui-radio-group>

Der value-Wert der <mdui-radio-group>-Komponente ist der value-Wert des aktuell ausgewählten <mdui-radio>-Elements. Sie können auch den aktuell ausgewählten Radio-Button ändern, indem Sie den value-Wert der <mdui-radio-group>-Komponente aktualisieren.

Chinesisch

Englisch

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinesisch</mdui-radio>
  <mdui-radio value="english">Englisch</mdui-radio>
</mdui-radio-group>

Quellcode

Sie können die <mdui-radio>-Komponente auch einzeln verwenden. In diesem Fall können Sie den ausgewählten Zustand über das Attribut checked lesen und ändern.

Radio

<mdui-radio checked>Radio</mdui-radio>

Quellcode

Deaktivierter Zustand

Fügen Sie das Attribut disabled zur <mdui-radio-group>-Komponente hinzu, um die gesamte Radio-Gruppe zu deaktivieren.

Chinesisch

Englisch

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinesisch</mdui-radio>
  <mdui-radio value="english">Englisch</mdui-radio>
</mdui-radio-group>

Quellcode

Wenn Sie nur bestimmte Radios deaktivieren möchten, fügen Sie das Attribut disabled zur <mdui-radio>-Komponente hinzu.

Chinesisch

Englisch

<mdui-radio-group>
  <mdui-radio value="chinese">Chinesisch</mdui-radio>
  <mdui-radio value="english" disabled>Englisch</mdui-radio>
</mdui-radio-group>

Quellcode

Symbol

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

Chinesisch

Englisch

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinesisch</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    Englisch
  </mdui-radio>
</mdui-radio-group>

Quellcode

`mdui-radio-group` API

Eigenschaften

Attribut	Property	Typ	Standard
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert die Radio Group.
`form`	`form`	`string`	-
Verknüpft die Radio Group mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Radio Group ihr übergeordnetes `<form>`-Element, falls vorhanden. Dies ermöglicht es der Radio Group, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
`name`	`name`	`string`	`''`
Der Name der Radio Group, der mit Formulardaten übermittelt wird.
`value`	`value`	`string`	`''`
Der Wert des ausgewählten Radio-Buttons, der mit Formulardaten übermittelt wird.
	`defaultValue`	`string`	`''`
Der standardmäßig ausgewählte Wert. Die Radio Group setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
`required`	`required`	`boolean`	`false`
Erfordert eine Radio-Auswahl, wenn das Formular gesendet wird.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Validierungsnachricht. Leere Zeichenfolge, wenn gültig.

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.

Ereignisse

Name
`change`
Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
`input`
Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
`<mdui-radio>`-Elemente.

`mdui-radio` API

Eigenschaften

Attribut	Property	Typ	Standard
`value`	`value`	`string`	`''`
Gibt den Wert des Radios an.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert das Radio.
`checked`	`checked`	`boolean`	`false`
Setzt das Radio in den aktivierten Zustand.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Gibt den Namen des Material Icons für den nicht aktivierten Zustand an. Alternativ können Sie `slot="unchecked-icon"` verwenden.
`checked-icon`	`checkedIcon`	`string`	-
Gibt den Namen des Material Icons für den aktivierten Zustand an. Alternativ können Sie `slot="checked-icon"` verwenden.
`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
`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 das Radio den Fokus erhält.
`blur`
Wird ausgelöst, wenn das Radio den Fokus verliert.
`change`
Wird ausgelöst, wenn das Radio ausgewählt wird.

Slots

Name
Standard
Textinhalt.
`unchecked-icon`
Icon für den nicht aktivierten Zustand.
`checked-icon`
Icon für den aktivierten Zustand.

CSS Parts

Name
`control`
Container für das linke Icon.
`unchecked-icon`
Icon für den nicht aktivierten Zustand.
`checked-icon`
Icon für den aktivierten Zustand.
`label`
Textinhalt.

Vorherige Seite

NavigationRail

Nächste Seite

RangeSlider

Radio

Verwendung

Beispiele

Ausgewählter Zustand

Deaktivierter Zustand

Symbol

`mdui-radio-group` API

Eigenschaften

Methoden

Ereignisse

Slots

`mdui-radio` API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts