Badge

shadow

Badge sú inline-block elementy, ktoré majú informatívny charakter a zvyčajne sa zobrazujú v blízkosti iného elementu. Používajú sa ako upozornenie, že k elementu sú priradené ďalšie elementy, a informujú používateľa o ich počte.

Základné použitie

Ak chcete použiť komponent Badge, zahrňte ho do HTML s požadovanými atribútmi.

Zoznam

Ukážka vkladá badge do zoznamovej položky, kde funguje ako krátky doplnkový indikátor, nie ako hlavný obsah.

Úprava štýlov

Farby

Ukážka porovnáva farebné varianty komponentu, aby bolo jednoduchšie vybrať vhodný významový stav aj mieru vizuálneho dôrazu.

Kedy použiť

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

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string
Predvolené	-

Udalosti

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

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é

Názov	Popis
--wje-badge-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.