Skip to main content

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. Počas vzdialeného načítavania ostáva prázdny stav skrytý a používateľ vidí loader v popupe. Keď wje-options odošle wje-options:load, loader sa odstráni; prázdny stav sa zobrazí iba vtedy, keď sa nenačítala žiadna možnosť. Popup sa pri async obsahu vie prispôsobiť šírke obsahu, napríklad širšiemu vyhľadávaciemu poľu, namiesto toho, aby zostal striktne na šírke úzkeho select triggera.

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. Vo viacnásobnom režime zostávajú vybrané chipy v stĺpci hodnoty pred clear tlačidlom, end slotom a šípkou. Dlhé chip labely sa skracujú namiesto toho, aby vytláčali ovládacie prvky mimo riadku.

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.

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. V režime multiple ostávajú vybrané položky zachované aj vtedy, keď výsledky lazy vyhľadávania dočasne nahradia aktuálne vykreslené možnosti. Select si preto drží hodnotu, chipy aj formulárové dáta zosynchronizované počas vyhľadávania.

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​

PopisUrčuje, či je výberové menu otvorené.
Atribútactive
Typboolean
Predvolené-

customErrorDisplay​

PopisRiadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribútcustom-error-display
Typboolean
Predvolenéfalse

disabled​

PopisVypína používateľskú interakciu s komponentom.
Atribútdisabled
Typboolean
Predvolenéfalse

lazy​

PopisUrčuje, či je voľba lazy zapnutá a ovplyvňuje správanie komponentu.
Atribútlazy
Typboolean
Predvolenéfalse

maxHeight​

PopisNastavuje rozmery alebo veľkosť pre voľbu max-height.
Atribútmax-height
Typstring｜null
Predvolenéauto

maxOptions​

PopisNastavuje číselnú hodnotu používanú vo voľbe max-options.
Atribútmax-options
Typnumber ｜ object
Predvolené1

noSize​

PopisNastavuje rozmery alebo veľkosť pre voľbu no-size.
Atribútno-size
Typboolean
Predvolenéfalse

offset​

PopisNastavuje textovú hodnotu uloženú vo voľbe offset.
Atribútoffset
Typstring
Predvolené5

portaled​

PopisUrčuje, či je voľba portaled zapnutá a ovplyvňuje správanie komponentu.
Atribútportaled
Typboolean｜string
Predvolené-

readonly​

PopisZabráni používateľovi upravovať hodnotu.
Atribútreadonly
Typboolean
Predvolenéfalse

trigger​

PopisNastavuje textovú hodnotu uloženú vo voľbe trigger.
Atribúttrigger
Typstring
Predvolenéclick

value​

PopisNastavuje aktuálnu hodnotu komponentu.
Atribútvalue
Typstring｜Array
Predvolené-

Udalosti​

NázovPopis
wje-select:changeVyvolá sa pri zmene hodnoty komponentu.
wje-popup:content-readyVyvolá sa pri odoslaní udalosti wje-popup:content-ready.

Metódy​

getAllOptions​

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

addOption​

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

addOptions​

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

selectOption​

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

selectOptions​

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

clearSelections​

PopisVyč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.

Content