RadioRádiógomb

A rádiógomb lehetővé teszi, hogy a felhasználók egy opciókészletből válasszanak ki egyet, biztosítva, hogy egyszerre csak egy opció legyen kijelölve.

Használat

A komponensek importálása:

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

A komponensek TypeScript-típusainak importálása:

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

Példa:

Kínai

Angol

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Kínai</mdui-radio>
  <mdui-radio value="english">Angol</mdui-radio>
</mdui-radio-group>

A <mdui-radio-group> komponens value attribútumának értéke a kijelölt <mdui-radio> komponens value attribútumának értéke. A <mdui-radio-group> komponens value attribútumának frissítésével is válthatja az aktuálisan kijelölt rádiógombot.

Kínai

Angol

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Kínai</mdui-radio>
  <mdui-radio value="english">Angol</mdui-radio>
</mdui-radio-group>

Forrás

A <mdui-radio> komponens önállóan is használható, ekkor a checked attribútummal lekérheti és módosíthatja a kijelölt állapotot.

Rádiógomb

<mdui-radio checked>Rádiógomb</mdui-radio>

Forrás

Letiltott állapot

A disabled attribútummal letilthatja az egész rádiógomb-csoportot a <mdui-radio-group> komponensen.

Kínai

Angol

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Kínai</mdui-radio>
  <mdui-radio value="english">Angol</mdui-radio>
</mdui-radio-group>

Forrás

Ha egy adott rádiógombot szeretne letiltani, adja hozzá a disabled attribútumot a <mdui-radio> komponenshez.

Kínai

Angol

<mdui-radio-group>
  <mdui-radio value="chinese">Kínai</mdui-radio>
  <mdui-radio value="english" disabled>Angol</mdui-radio>
</mdui-radio-group>

Forrás

Ikon

Az unchecked-icon és checked-icon attribútumokkal megadhatja a nem kijelölt és kijelölt állapotú rádiógomb Material Icons ikonját. Az unchecked-icon és checked-icon slotokon keresztül is megadhatja őket.

Kínai

Angol

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Kínai</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>
    Angol
  </mdui-radio>
</mdui-radio-group>

Forrás

`mdui-radio-group` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`disabled`	`disabled`	`boolean`	`false`
A komponens letiltása.
`form`	`form`	`string`	-
A kapcsolódó `<form>` elem. Ennek az attribútumnak az értéke egy `<form>` elem `id`-ja kell legyen ugyanazon az oldalon. Ha ez az attribútum nincs megadva, az elemnek a `<form>` elem gyermekének kell lennie. Ezzel az attribútummal az elem az oldal bármely pontjára elhelyezhető, nem csak a `<form>` elem gyermekeként.
`name`	`name`	`string`	`''`
A rádiógomb-csoport neve, amely az űrlapadatokkal együtt kerül elküldésre.
`value`	`value`	`string`	`''`
A rádiógomb-csoport aktuálisan kiválasztott értéke, amely az űrlapadatokkal együtt kerül elküldésre.
	`defaultValue`	`string`	`''`
Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az értékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
`required`	`required`	`boolean`	`false`
Az űrlap elküldésekor kötelező-e kiválasztani az egyik rádiógombot.
	`validity`	`ValidityState`	-
Az űrlap-ellenőrzés állapotobjektuma, részletekért lásd: `ValidityState`
	`validationMessage`	`string`	-
Ha az űrlap-ellenőrzés sikertelen, ez a tulajdonság tartalmazza a hibaüzenetet. Ha sikeres, üres karakterlánc.

Metódusok

Név	Paraméterek	Visszatérési érték
`checkValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza és kiváltja az `invalid` eseményt; ha igen, `true` értéket ad vissza.
`reportValidity`		`boolean`
Ellenőrzi, hogy az űrlapmező megfelel-e a validációs szabályoknak. Ha nem, `false` értéket ad vissza, kiváltja az `invalid` eseményt, és megjeleníti a hibajelzést a komponensen; ha igen, `true` értéket ad vissza. Ha az ellenőrzés sikertelen, a komponensen megjelenik az érvénytelenséget jelző vizuális visszajelzés.
`setCustomValidity`	`message: string`	`void`
Egyéni hibaüzenet beállítása. Amíg ez a szöveg nem üres, addig a mező érvénytelennek minősül.

Események

Név
`change`
A kiválasztott érték változásakor aktiválódik.
`input`
A kiválasztott érték változásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.

Slots

Név
(alapértelmezett)
A `<mdui-radio>` elemek.

`mdui-radio` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`value`	`value`	`string`	`''`
Az aktuális rádiógomb értéke.
`disabled`	`disabled`	`boolean`	`false`
Az aktuális rádiógomb letiltása.
`checked`	`checked`	`boolean`	`false`
Az aktuális rádiógomb ki van-e választva.
`unchecked-icon`	`uncheckedIcon`	`string`	-
A nem kiválasztott állapot Material Icons ikonjának neve. Beállítható a `slot="unchecked-icon"` segítségével is.
`checked-icon`	`checkedIcon`	`string`	-
A kiválasztott állapot Material Icons ikonjának neve. Beállítható a `slot="checked-icon"` segítségével is.
`autofocus`	`autofocus`	`boolean`	`false`
Automatikusan fókuszt kapjon-e betöltődés után.
`tabindex`	`tabIndex`	`number`	-
Az elem sorszáma a Tab billentyűvel történő navigálás során.

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
Egérkattintás szimulálása az elemen.
`focus`	`options: FocusOptions` (Opcionális)	`void`
Fókusz állítása az aktuális elemre. Egy objektum is átadható paraméterként, a következő tulajdonságokkal: `preventScroll`: Alapértelmezés szerint a fókusz elnyerése után a böngésző az elemre görget. Ha ezt a tulajdonságot `true`-ra állítja, a görgetés elmarad.
`blur`		`void`
Fókusz eltávolítása az aktuális elemről.

Események

Név
`focus`
Fókusz elnyerésekor aktiválódik.
`blur`
Fókusz elvesztésekor aktiválódik.
`change`
A rádiógomb kiválasztásakor aktiválódik.

Slots

Név
(alapértelmezett)
Szöveges tartalom.
`unchecked-icon`
A nem kiválasztott állapot ikonja.
`checked-icon`
A kiválasztott állapot ikonja.

CSS Parts

Név
`control`
A bal oldali ikon konténere.
`unchecked-icon`
A nem kiválasztott állapot ikonja.
`checked-icon`
A kiválasztott állapot ikonja.
`label`
Szöveges tartalom.

Előző fejezet

NavigationRail Navigációs sín

Következő fejezet

RangeSlider Tartománycsúszka

RadioRádiógomb

Használat

Példák

Kijelölt állapot

Letiltott állapot

Ikon

`mdui-radio-group` API

Tulajdonságok

Metódusok

Események

Slots

`mdui-radio` API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts