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.

Recommended practices

• 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

Popis	Nastavuje názov vybranej ikony.
Atribút	icon
Typ	string
Predvolené	-

size

Popis	Nastavuje veľkosť komponentu.
Atribút	size
Typ	number
Predvolené	60

type

Popis	Nastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty.
Atribút	type
Typ	string
Predvolené	-

Events

Názov	Popis
wje-icon-picker:select	Vyvolá sa pri výbere položky.

Methods

initial

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

getTags

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

clearIconsContainer

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

debounce

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

CSS shadow parts

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.

CSS custom variables

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.

Slots

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