RadioPřepínač

Přepínače umožňují uživatelům vybrat jednu z možností ze sady a zajistit, že v každém okamžiku může být vybrána pouze jedna možnost.

Způsob použití

Importujte komponenty podle potřeby:

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

Importujte TypeScript typy komponent podle potřeby:

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

Příklad použití:

Čínština

Angličtina

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Čínština</mdui-radio>
  <mdui-radio value="english">Angličtina</mdui-radio>
</mdui-radio-group>

Hodnota value komponenty <mdui-radio-group> je hodnota value aktuálně vybrané komponenty <mdui-radio>. Lze také přepínat aktuálně vybraný přepínač aktualizací hodnoty value komponenty <mdui-radio-group>.

Čínština

Angličtina

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Čínština</mdui-radio>
  <mdui-radio value="english">Angličtina</mdui-radio>
</mdui-radio-group>

Zdrojový kód

Komponentu <mdui-radio> lze použít samostatně. V takovém případě můžete pomocí atributu checked číst a upravovat stav výběru.

Přepínač

<mdui-radio checked>Přepínač</mdui-radio>

Zdrojový kód

Zakázaný stav

Přidáním atributu disabled na komponentu <mdui-radio-group> zakážete celou skupinu přepínačů.

Čínština

Angličtina

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Čínština</mdui-radio>
  <mdui-radio value="english">Angličtina</mdui-radio>
</mdui-radio-group>

Zdrojový kód

Pokud chcete zakázat konkrétní přepínač, přidejte atribut disabled na komponentu <mdui-radio>.

Čínština

Angličtina

<mdui-radio-group>
  <mdui-radio value="chinese">Čínština</mdui-radio>
  <mdui-radio value="english" disabled>Angličtina</mdui-radio>
</mdui-radio-group>

Zdrojový kód

Ikona

Můžete nastavit atributy unchecked-icon a checked-icon k definování ikon Material Icons pro nevybraný a vybraný stav přepínače. Můžete je také nastavit pomocí slotů unchecked-icon a checked-icon.

Čínština

Angličtina

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Čínština</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>
    Angličtina
  </mdui-radio>
</mdui-radio-group>

Zdrojový kód

`mdui-radio-group` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je tato komponenta zakázaná.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`.
`name`	`name`	`string`	`''`
Název skupiny přepínačů, který se odešle spolu s daty formuláře.
`value`	`value`	`string`	`''`
Aktuálně vybraná hodnota ve skupině přepínačů, která se odešle spolu s daty formuláře.
	`defaultValue`	`string`	`''`
Výchozí vybraná hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
`required`	`required`	`boolean`	`false`
Určuje, zda musí být při odesílání formuláře vybrán jeden z přepínačů.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.

Metody

Název	Parametry	Vrací
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.

Události

Název
`change`
Spustí se při změně vybrané hodnoty.
`input`
Spustí se při změně vybrané hodnoty.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.

Slots

Název
(výchozí)
Prvky `<mdui-radio>`.

`mdui-radio` API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`value`	`value`	`string`	`''`
Hodnota aktuálního přepínače.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je aktuální přepínač zakázaný.
`checked`	`checked`	`boolean`	`false`
Určuje, zda je aktuální přepínač vybrán.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Název ikony z knihovny Material Icons pro nevybraný stav. Lze také nastavit pomocí `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí `slot="checked-icon"`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.

Metody

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`change`
Spustí se při výběru tohoto přepínače.

Slots

Název
(výchozí)
Textový obsah.
`unchecked-icon`
Ikona pro nevybraný stav.
`checked-icon`
Ikona pro vybraný stav.

CSS Parts

Název
`control`
Kontejner pro levou ikonu.
`unchecked-icon`
Ikona pro nevybraný stav.
`checked-icon`
Ikona pro vybraný stav.
`label`
Textový obsah.

Předchozí kapitola

NavigationRail Postranní navigační lišta

Další kapitola

RangeSlider Posuvník rozsahu

RadioPřepínač

Způsob použití

Příklady

Vybraný stav

Zakázaný stav

Ikona

`mdui-radio-group` API

Vlastnosti

Metody

Události

Slots

`mdui-radio` API

Vlastnosti

Metody

Události

Slots

CSS Parts