Skip to main content

Icon Picker

shadow

Icon picker allows the user to find and select an icon from a set of available icons. It includes text search for easier icon retrieval.

Basic usage

The sample represents the basic way of selecting an icon, without further composition with other components.

When to use

Use wje-icon-picker to display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts and text equivalents for icons without captions.

  • Compress media and use lazy loading for large lists.
  • Keep information priorities consistent for tabs and lists.
  • Do not repeat the same information in text and icon at the same time without adding value.

Attributes and properties

icon

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

size

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

type

PopisNastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty.
Atribúttype
Typstring
Predvolené-

Events

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

Methods

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 shadow parts

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 custom variables

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.

Slots

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