Chip

shadow

Komponent Chip je univerzálny element, ktorý predstavuje malý vizuálny blok obsahujúci rôzne ďalšie elementy, ako napríklad avatary, text a ikony. Ponúka možnosti prispôsobenia farieb, stavov a ďalšie.

Základné použitie

Ukážka zobrazuje chip v jeho najjednoduchšej podobe ako krátky štítok alebo filter bez ďalších doplnkov.

Vkladanie ďalších prvkov

V elemente chip je možné zobraziť aj ďalšie elementy, napríklad avatar, label a icon. Leading obsah vložte do slot="start", hlavný text nechajte v default slote a trailing obsah vložte do slot="end". Takýto markup drží ikony, avatary, dlhý text aj remove tlačidlo v stabilnom riadku bez prekrývania.

Štýlovanie

Farebné varianty

Ukážka porovnáva farebné varianty chipu, aby bolo jednoduchšie vybrať vhodný štýl pre štítky, filtre alebo stavy.

Štýlovanie pomocou CSS custom vlastností

Ukážka sa sústreďuje na úpravu vzhľadu chipu cez CSS premenné namiesto zmeny markupu alebo API.

Kedy použiť

Použite wje-chip 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

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	any
Predvolené	-

removable

Popis	Určuje, či je voľba removable zapnutá a ovplyvňuje správanie komponentu.
Atribút	removable
Typ	boolean
Predvolené	false

round

Popis	Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribút	round
Typ	boolean
Predvolené	false

size

Popis	Nastavuje veľkosť komponentu.
Atribút	size
Typ	string
Predvolené	-

Udalosti

Názov	Popis
wje-chip:remove	Vyvolá sa pri odoslaní udalosti wje-chip:remove.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
default	Predvolený slot pre hlavný obsah komponentu.
end	Slot pre obsah zobrazený za hlavným obsahom.