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. Ak je select umiestnený v kontajneri s overflow: hidden, v dialógu alebo v inom overlayi, použite atribút portaled.

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',
};

Portaled

Pridaním atribútu portaled sa dropdown so zoznamom možností presunie do portálu podobne ako pri wje-dropdown. Tým sa vyhnete orezaniu zoznamu v rodičoch s overflow: hidden alebo v zložitejších overlay scenároch. Select pritom stále pracuje s pôvodnými wje-option prvkami a podporuje aj dynamické možnosti z wje-options.

Standard

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

Dlhé texty

Single-select režim zobrazuje vybranú hodnotu v samostatnom textovom wrapperi s ellipsis. Dlhý názov položky preto nerozťahuje input a ostáva v jednej línii so start/end slotmi, clear tlačidlom aj šípkou.

Pri možnostiach s vlastnou akciou v slot="end" držte akciu ako samostatný prvok, napríklad wje-button only-icon. wje-option pri dlhých textoch zalamuje obsah a slot end drží oddelene od labelu.

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	boolean
Predvolené	-

customErrorDisplay

Popis	Riadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribút	custom-error-display
Typ	boolean
Predvolené	false

disabled

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

lazy

Popis	Určuje, či je voľba lazy zapnutá a ovplyvňuje správanie komponentu.
Atribút	lazy
Typ	boolean
Predvolené	false

maxHeight

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-height.
Atribút	max-height
Typ	string｜null
Predvolené	auto

maxOptions

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-options.
Atribút	max-options
Typ	number ｜ object
Predvolené	1

noSize

Popis	Nastavuje rozmery alebo veľkosť pre voľbu no-size.
Atribút	no-size
Typ	boolean
Predvolené	false

offset

Popis	Nastavuje textovú hodnotu uloženú vo voľbe offset.
Atribút	offset
Typ	string
Predvolené	5

portaled

Popis	Určuje, či je voľba portaled zapnutá a ovplyvňuje správanie komponentu.
Atribút	portaled
Typ	boolean｜string
Predvolené	-

readonly

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

trigger

Popis	Nastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribút	trigger
Typ	string
Predvolené	click

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string｜Array
Predvolené	-

Udalosti

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

Metódy

getAllOptions

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

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

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.