SelectVálasztómező

A választómező komponens egy lenyíló menüben kínál különböző lehetőségeket, megkönnyítve a felhasználó számára a szükséges tartalom gyors kiválasztását.

Ez az oldal elsősorban a <mdui-select> komponens használatát mutatja be. A lenyíló menüpontok használatával kapcsolatban tekintse meg a <mdui-menu-item> dokumentációját.

Használat

A komponensek importálása:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

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

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Példa:

1. elem

2. elem

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">2. elem</mdui-menu-item>
</mdui-select>

A prefix és suffix attribútumokkal kiegészítő szövegeket adhat a választómező elejére és végére. A prefix és suffix slotokban is megadhat szöveges elemeket a választómező elejére és végére. Ezek a szövegek csak akkor jelennek meg, ha a választómező fókuszban van vagy van értéke.

1. elem

2. elem

1. elem

2. elem

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">2. elem</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">1. elem</mdui-menu-item>
  <mdui-menu-item value="item-2">2. elem</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Forrás

API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
A választómező variánsa. Lehetséges értékek: `filled`: Háttérszínnel rendelkező választómező, erősebb vizuális hatás `outlined`: Keretes választómező, gyengébb vizuális hatás
`multiple`	`multiple`	`boolean`	`false`
Több kiválasztás támogatása.
`name`	`name`	`string`	`''`
A választómező neve, amely az űrlapadatokkal együtt kerül elküldésre.
`value`	`value`	`string \| string[]`	`''`
A választómező értéke, amely az űrlapadatokkal együtt kerül elküldésre. Ha a `multiple` attribútum nincs megadva, az érték karakterlánc; ha a `multiple` attribútum meg van adva, az érték karakterláncok tömbje. A HTML attribútum csak karakterlánc értéket állíthat be; ha tömb értéket kell beállítani, azt a JavaScript tulajdonságon keresztül kell megtenni.
	`defaultValue`	`string \| string[]`	`''`
Az alapértelmezett kiválasztott érték. Az űrlap visszaállításakor erre az alapértékre áll vissza. Ez a tulajdonság csak JavaScript tulajdonságként állítható be.
`label`	`label`	`string`	-
Címke szöveg.
`placeholder`	`placeholder`	`string`	-
Helyőrző szöveg.
`helper`	`helper`	`string`	-
A választómező alján található súgó szöveg. Beállítható a `slot="helper"` segítségével is.
`clearable`	`clearable`	`boolean`	`false`
A választómező tartalma törölhető-e.
`clear-icon`	`clearIcon`	`string`	-
Ha a választómező törölhető, a jobb oldalon megjelenő törlés gomb Material Icons ikonjának neve. Beállítható a `slot="clear-icon"` segítségével is.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
A választómező pozíciója. Lehetséges értékek: `auto`: Automatikus pozíció meghatározás `bottom`: Alul `top`: Felül
`end-aligned`	`endAligned`	`boolean`	`false`
A szöveg jobbra legyen-e igazítva.
`prefix`	`prefix`	`string`	-
A választómező előtag szövege. Csak fókusz állapotban, vagy ha a választómezőnek van értéke, jelenik meg. Beállítható a `slot="prefix"` segítségével is.
`suffix`	`suffix`	`string`	-
A választómező utótag szövege. Csak fókusz állapotban, vagy ha a választómezőnek van értéke, jelenik meg. Beállítható a `slot="suffix"` segítségével is.
`icon`	`icon`	`string`	-
A választómező előtag ikonjának Material Icons ikon neve. Beállítható a `slot="icon"` segítségével is.
`end-icon`	`endIcon`	`string`	-
A választómező utótag ikonjának Material Icons ikon neve. Beállítható a `slot="end-icon"` segítségével is.
`error-icon`	`errorIcon`	`string`	-
Az űrlapmező ellenőrzésének sikertelenségekor a választómező jobb oldalán megjelenő Material Icons ikon neve. Beállítható a `slot="error-icon"` segítségével is.
`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.
`readonly`	`readonly`	`boolean`	`false`
Csak olvasható állapotban van-e.
`disabled`	`disabled`	`boolean`	`false`
Letiltott állapotú-e.
`required`	`required`	`boolean`	`false`
Az űrlap elküldésekor kötelező-e kitölteni ezt a mezőt.
	`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.
`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
`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.
`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 kiválasztott érték változásakor aktiválódik.
`invalid`
Az űrlapmező ellenőrzésének sikertelenségekor aktiválódik.
`clear`
A `clearable` attribútum által generált törlés gombra kattintáskor aktiválódik. Az `event.preventDefault()` meghívásával megakadályozható a választómező tartalmának törlése.

Slots

Név
(alapértelmezett)
A `<mdui-menu-item>` elemek.
`icon`
Bal oldali ikon.
`end-icon`
Jobb oldali ikon.
`error-icon`
Ellenőrzési hiba állapot jobb oldali ikonja.
`prefix`
Bal oldali szöveg.
`suffix`
Jobb oldali szöveg.
`clear-button`
Törlés gomb.
`clear-icon`
A törlés gombban lévő ikon.
`helper`
Az alsó súgó szöveg.

CSS Parts

Név
`chips`
Több kiválasztás esetén a kiválasztott értékek chipjeit tartalmazó konténer.
`chip`
Több kiválasztás esetén az egyes kiválasztott értékek chipjei.
`chip__button`
A chip belső `<button>` eleme.
`chip__label`
A chip belső szövege.
`chip__delete-icon`
A chip belső törlés ikonja.
`text-field`
A szövegmező, azaz a `<mdui-text-field>` elem.
`text-field__container`
A text-field belső szövegmező konténere.
`text-field__icon`
A text-field belső bal oldali ikonja.
`text-field__end-icon`
A text-field belső jobb oldali ikonja.
`text-field__error-icon`
A text-field belső ellenőrzési hiba állapot jobb oldali ikonja.
`text-field__prefix`
A text-field belső bal oldali szövege.
`text-field__suffix`
A text-field belső jobb oldali szövege.
`text-field__label`
A text-field belső címke szövege.
`text-field__input`
A text-field belső `<input>` eleme.
`text-field__clear-button`
A text-field belső törlés gombja.
`text-field__clear-icon`
A text-field belső törlés gombjában lévő ikon.
`text-field__supporting`
A text-field belső alsó súgó információk konténere, beleértve a helper-t és a hibát.
`text-field__helper`
A text-field belső alsó súgó szövege.
`text-field__error`
A text-field belső alsó hibaleíró szövege.
`menu`
A legördülő menü, azaz a `<mdui-menu>` elem.

Előző fejezet

RangeSlider Tartománycsúszka

Következő fejezet

SegmentedButton Szegmentált gomb

SelectVálasztómező

Használat

Példák

Változat

Többszörös kiválasztás támogatása

Kiegészítő szöveg

Csak olvasható mód

Letiltott mód

Törölhető

Lenyíló menü pozíciója

Szöveg jobbra igazítása

Előtag és utótag szövegek és ikonok

API

Tulajdonságok

Metódusok

Események

Slots

CSS Parts