Chip
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 elementy avatar, label a icon.
Š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 |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |