Skip to main content

Icon Picker

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.

Základné použitie

Kedy použiť

Použite wje-icon-picker na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.

Kedy nepoužiť

Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.

Prístupnosť

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.

Atribúty a vlastnosti

icon

PopisNastavuje názov vybranej ikony.
Atribúticon
Typstring
Predvolené-

size

PopisNastavuje veľkosť komponentu.
Atribútsize
Typnumber
Predvolené-

Udalosti

NázovPopis
wje-icon-picker:selectVyvolá sa pri výbere položky.

Metódy

initial

PopisSpustí metódu initial na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra() => void

getTags

PopisVráti tags z aktuálneho stavu komponentu.
Signatúra() => Promise<Array>

clearIconsContainer

PopisVyčistí icons container a obnoví súvisiace hodnoty.
Signatúra() => void

debounce

PopisSpustí metódu debounce na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra(fn: Function, delay: number) => Function

CSS tieňové časti

NázovPopis
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.

CSS vlastné premenné

NázovPopis
--wje-color-picker-valueVlastná CSS premenná, ktorá riadi color picker value.
--wje-color-picker-areaVlastná CSS premenná, ktorá riadi color picker area.
--wje-color-picker-swatchVlastná CSS premenná, ktorá riadi color picker swatch.
--wje-color-picker-sizeVlastná CSS premenná, ktorá riadi color picker size.
--wje-color-picker-radiusVlastná CSS premenná, ktorá riadi color picker radius.

Sloty

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