RadioPrzycisk radiowy

Przycisk radiowy umożliwia wybranie jednej opcji z zestawu. Tylko jedna opcja może być zaznaczona jednocześnie.

Sposób użycia

Zaimportuj komponenty:

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

Zaimportuj typy TypeScript komponentów:

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

Przykład użycia:

Chiński

Angielski

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chiński</mdui-radio>
  <mdui-radio value="english">Angielski</mdui-radio>
</mdui-radio-group>

Wartość value komponentu <mdui-radio-group> to wartość value aktualnie zaznaczonego komponentu <mdui-radio>. Możesz również zmienić aktualnie zaznaczony przycisk radiowy, aktualizując wartość value komponentu <mdui-radio-group>.

Chiński

Angielski

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chiński</mdui-radio>
  <mdui-radio value="english">Angielski</mdui-radio>
</mdui-radio-group>

Źródło

Możesz używać komponentu <mdui-radio> samodzielnie, odczytując i modyfikując stan zaznaczenia za pomocą atrybutu checked.

Radio

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

Źródło

Stan wyłączony

Dodanie atrybutu disabled do komponentu <mdui-radio-group> wyłącza całą grupę przycisków radiowych.

Chiński

Angielski

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chiński</mdui-radio>
  <mdui-radio value="english">Angielski</mdui-radio>
</mdui-radio-group>

Źródło

Aby wyłączyć konkretny przycisk radiowy, dodaj atrybut disabled do komponentu <mdui-radio>.

Chiński

Angielski

<mdui-radio-group>
  <mdui-radio value="chinese">Chiński</mdui-radio>
  <mdui-radio value="english" disabled>Angielski</mdui-radio>
</mdui-radio-group>

Źródło

Ikona

Możesz ustawić atrybuty unchecked-icon i checked-icon, aby zdefiniować odpowiednio ikony Material Icons dla stanu niezaznaczonego i zaznaczonego. Możesz również użyć slotów unchecked-icon i checked-icon.

Chiński

Angielski

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chiński</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>
    Angielski
  </mdui-radio>
</mdui-radio-group>

Źródło

`mdui-radio-group` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`disabled`	`disabled`	`boolean`	`false`
Określa, czy grupa przycisków radiowych jest wyłączona.
`form`	`form`	`string`	-
Powiązany element `<form>`. Wartość tego atrybutu powinna być `id` elementu `<form>` na tej samej stronie. Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu `<form>`. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu `<form>`.
`name`	`name`	`string`	`''`
Nazwa grupy przycisków radiowych, która zostanie wysłana wraz z danymi formularza
`value`	`value`	`string`	`''`
Aktualnie zaznaczona wartość w grupie przycisków radiowych, która zostanie wysłana wraz z danymi formularza
	`defaultValue`	`string`	`''`
Domyślnie zaznaczona wartość. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
`required`	`required`	`boolean`	`false`
Określa, czy zaznaczenie jednego z przycisków radiowych jest wymagane podczas przesyłania formularza.
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`string`	-
Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków

Metody

Nazwa	Parametry	Zwraca
`checkValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`
`reportValidity`		`boolean`
Sprawdza poprawność pola formularza. Jeśli nie, zwraca `false` i wywołuje zdarzenie `invalid`; jeśli tak, zwraca `true`. Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
`setCustomValidity`	`message: string`	`void`
Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji

Zdarzenia

Nazwa
`change`
Wywoływane po zmianie zaznaczonej wartości
`input`
Wywoływane po zmianie zaznaczonej wartości
`invalid`
Wywoływane, gdy pole formularza nie przejdzie walidacji

Slots

Nazwa
(domyślny)
Elementy `<mdui-radio>`

`mdui-radio` API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`value`	`value`	`string`	`''`
Wartość bieżącego przycisku radiowego
`disabled`	`disabled`	`boolean`	`false`
Określa, czy przycisk radiowy jest wyłączony.
`checked`	`checked`	`boolean`	`false`
Określa, czy przycisk radiowy jest zaznaczony.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu niezaznaczonego. Można również ustawić za pomocą `slot="unchecked-icon"`
`checked-icon`	`checkedIcon`	`string`	-
Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą `slot="checked-icon"`
`autofocus`	`autofocus`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).

Metody

Nazwa	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`void`
Przenosi fokus na bieżący element. Można przekazać obiekt jako parametr, którego właściwości obejmują: `preventScroll`: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na `true`.
`blur`		`void`
Usuwa fokus z bieżącego elementu

Zdarzenia

Nazwa
`focus`
Wywoływane po otrzymaniu fokusu
`blur`
Wywoływane po utracie fokusu
`change`
Wywoływane po zaznaczeniu tego przycisku radiowego

Slots

Nazwa
(domyślny)
Treść tekstowa
`unchecked-icon`
Ikona dla stanu niezaznaczonego
`checked-icon`
Ikona dla stanu zaznaczonego

CSS Parts

Nazwa
`control`
Kontener ikony po lewej stronie
`unchecked-icon`
Ikona dla stanu niezaznaczonego
`checked-icon`
Ikona dla stanu zaznaczonego
`label`
Treść tekstowa

Poprzedni rozdział

NavigationRail Szyna nawigacyjna

Następny rozdział

RangeSlider Suwak zakresu

RadioPrzycisk radiowy

Sposób użycia

Przykłady

Stan zaznaczenia

Stan wyłączony

Ikona

`mdui-radio-group` API

Właściwości

Metody

Zdarzenia

Slots

`mdui-radio` API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts