shadow
Icon picker umožňuje používateľovi nájsť a zvoliť ikonu zo sady dostupných ikon. Jeho súčasťou je textové vyhľádavanie pre jednoduchšie vyhľadanie ikony.
Ukážka predstavuje základný spôsob výberu ikony, bez ďalšej kompozície s inými komponentmi.
Použite wje-icon-picker na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.
Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.
Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.
Odporúčané postupy
- Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
- Pri kartách a zoznamoch držte konzistentné informačné priority.
- Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.
| Popis | Nastavuje názov vybranej ikony. |
| Atribút | icon |
| Typ | string |
| Predvolené | - |
| Popis | Nastavuje veľkosť komponentu. |
| Atribút | size |
| Typ | number |
| Predvolené | 60 |
| Popis | Nastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty. |
| Atribút | type |
| Typ | string |
| Predvolené | - |
| Názov | Popis |
|---|
wje-icon-picker:select | Vyvolá sa pri výbere položky. |
| Popis | Spustí metódu initial na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | () => void |
| Popis | Vráti tags z aktuálneho stavu komponentu. |
| Signatúra | () => Promise<Array> |
| Popis | Vyčistí icons container a obnoví súvisiace hodnoty. |
| Signatúra | () => void |
| Popis | Spustí metódu debounce na vykonanie logiky komponentu a aktualizáciu jeho stavu. |
| Signatúra | (fn: Function, delay: number) => Function |
| Názov | Popis |
|---|
native | Štýluje koreňovú shadow časť komponentu. |
anchor | Štýluje shadow časť anchor. |
picker | Štýluje shadow časť picker. |
input | Štýluje shadow časť input. |
| Názov | Popis |
|---|
--wje-color-picker-value | Vlastná CSS premenná, ktorá riadi color picker value. |
--wje-color-picker-area | Vlastná CSS premenná, ktorá riadi color picker area. |
--wje-color-picker-swatch | Vlastná CSS premenná, ktorá riadi color picker swatch. |
--wje-color-picker-size | Vlastná CSS premenná, ktorá riadi color picker size. |
--wje-color-picker-radius | Vlastná CSS premenná, ktorá riadi color picker radius. |
Pre tento komponent nie sú dostupné žiadne sloty.