Select

shadow

Select element rozširuje možnosti štandardného HTML select elementu poskytujúc vylepšenú používateľskú skúsenosť. Podporuje jednoduchý aj viacnásobný výber možností pomocou atribútu multiple. Ponúka rozšírené funkcie ako vymazateľný obsah pomocou atribútu clearable, vyhľadávanie v možnostiach pomocou find a lenivé načítavanie pre optimalizáciu výkonu s atribútom lazy. Pri viacnásobnom výbere možností sa vybrané položky zobrazujú ako chipy s konfigurovateľným maximálnym počtom zobrazených položiek. Komponent tiež podporuje dynamické načítanie možností z externých zdrojov prostredníctvom elementu Options.

Základné použitie

V predvolenom nastavení výber umožňuje používateľovi vybrať len jednu možnosť. Zahrnutím elementu Icon sa pri možnosti zobrazí aj zvolená ikona.

Výber viacerých položiek

Pridaním atribútu multiple umožníte používateľovi vybrať viacero možností.

Clearable

Pridaním atribútu clearable umožníte používateľovi odstrániť všetky zvolené možnosti kliknutím na ikonu .

Disabled

Pridaním atribútu disabled zabránite používateľovi interagovať so Selectom.

Dynamický zoznam možností

Použitím komponentu Options je podporovaný aj dynamicky generovaný zoznam možností, ktorý sa asynchrónne načíta zo zadanej URL adresy. Ak sa nevrátia žiadne možnosti, alebo vyhľadávanie nevráti zhodu, dropdown zobrazí prázdny stav s hláškou Žiadne dáta. Text tejto hlášky sa berie z lokalizačného kľúča wj.select.empty. Ak ho chcete zmeniť v knižnici, upravte príslušný jazykový súbor v packages/translations, napríklad packages/translations/sk-sk.js alebo packages/translations/en-gb.js. Použitý preklad sa vyberá podľa hodnoty lang na komponente alebo nadradenom elemente.

export const skSk = {
    // ...
    'wj.select.empty': 'Žiadne dáta',
};

Standard

Pridaním atribútu standard sa zobrazí Select v štýle štandardného HTML selectu.

Lazy načítavanie

Pridaním atribútu lazy sa načítajú možnosti len vtedy, keď je to potrebné. To môže byť užitočné pri veľkých množstvách možností alebo pri načítavaní z externých zdrojov.

Find

Pridaním atribútu find sa zobrazí vstupné pole, ktoré umožňuje používateľovi vyhľadávať možnosti v zozname. Používateľ môže zadať text a zoznam sa automaticky filtruje podľa zadaného textu.

Lazy search

Skombinovaním atribútov lazy a find sa načítajú možnosti len vtedy, keď používateľ začne písať do vstupného poľa. To môže byť užitočné pri veľkých množstvách možností alebo pri načítavaní z externých zdrojov.

Kedy použiť

Použite wje-select, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

active

Popis	Určuje, či je výberové menu otvorené.
Atribút	active
Typ	any
Predvolené	-

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	-

readonly

Popis	Zabráni používateľovi upravovať hodnotu.
Atribút	readonly
Typ	boolean
Predvolené	-

Udalosti

Názov	Popis
wje-popup:content-ready	Vyvolá sa pri odoslaní udalosti wje-popup:content-ready.
wje-select:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

getAllOptions

Popis	Vráti všetky položky z aktuálneho stavu komponentu.
Signatúra	() => NodeList

selectionChanged

Popis	Spracuje zmenu výberu a synchronizuje vybrané položky.
Signatúra	(options: Array｜null, length: number) => void

selections

Popis	Spracuje zmenu výberu a synchronizuje vybrané položky.
Signatúra	(silence?: boolean) => void

counter

Popis	Prepočíta počítadlá používané pri aktuálnom stave výberu.
Signatúra	() => void

getChip

Popis	Vráti čip z aktuálneho stavu komponentu.
Signatúra	(option: object) => HTMLElement

htmlOption

Popis	Vytvorí HTML pre položku možnosti zobrazenú vo výberovom zozname.
Signatúra	(item: object, map?: object) => HTMLElement

htmlSelectedItem

Popis	Vytvorí HTML pre položku zobrazenú vo vybranej hodnote.
Signatúra	(item: any) => any

addOption

Popis	Pridá položku do spravovanej kolekcie komponentu.
Signatúra	(optionData: object, silent?: boolean, map?: object) => void

addOptions

Popis	Pridá položky do spravovanej kolekcie komponentu.
Signatúra	(optionsData: Array ｜ object, silent?: boolean, map?: object) => void

selectOption

Popis	Vyberie položku a aktualizuje aktívny stav.
Signatúra	(value: string, silent?: boolean) => void

selectOptions

Popis	Vyberie položky a aktualizuje aktívny stav.
Signatúra	(values: any｜any[], silent?: boolean) => void

optionCheckSlot

Popis	Overí a aktualizuje obsah slotu možnosti pred vykreslením.
Signatúra	(option: HTMLElement) => void

clearSelections

Popis	Vyčistí výbery a obnoví súvisiace hodnoty.
Signatúra	() => void

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Pre tento komponent nie sú dostupné žiadne sloty.