Item

shadow

Komponenty Item sú bloky, ktoré môžu obsahovať rôzne typy obsahu vrátane textu, ikon, avatarov, obrázkov, inputov a iných štandardných alebo custom elementov. Item elementy sa zvyčajne nachádzajú vo vnútri List elementov.

Základné použitie

Ukážka ukazuje najbežnejšiu podobu wje-item, teda jeden obsahový riadok s predvoleným rozložením a bez doplnkových variánt.

Oddeľovacie čiary

Atribút lines riadi, ako sa vykreslí spodné oddelenie položky. Hodí sa to najmä v zoznamoch, kde potrebujete jemnejšie alebo naopak výraznejšie vizuálne oddelenie obsahu.

Použitie s obrázkami

Ukážka kombinuje item s médiom, aby bolo jasné, ako vedľa seba funguje obrázok alebo náhľad a textový obsah.

Použitie s tlačidlami

Ukážka pridáva do itemu akčné tlačidlá, takže je vidieť odporúčaný vzor pre riadok, ktorý má aj rýchle akcie.

Použitie s ikonami

Ukážka sa sústreďuje na prácu s ikonami v iteme a na ich čitateľné zarovnanie voči textu a doplnkovému obsahu.

Kedy použiť

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

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

Udalosti

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

Metódy

isClickable

Popis	Overí, či je clickable aktuálne pravda.
Signatúra	() => boolean

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-item-background	Vlastná CSS premenná na štýlovanie komponentu (background).
--wje-item-color	Vlastná CSS premenná, ktorá riadi color.
--wje-item-padding-start	Vlastná CSS premenná, ktorá riadi padding start.
--wje-item-padding-end	Vlastná CSS premenná, ktorá riadi padding end.
--wje-item-padding-top	Vlastná CSS premenná, ktorá riadi padding top.
--wje-item-padding-bottom	Vlastná CSS premenná, ktorá riadi padding bottom.
--wje-item-inner-padding-start	Vlastná CSS premenná, ktorá riadi inner padding start.
--wje-item-inner-padding-end	Vlastná CSS premenná, ktorá riadi inner padding end.
--wje-item-inner-padding-top	Vlastná CSS premenná, ktorá riadi inner padding top.
--wje-item-inner-padding-bottom	Vlastná CSS premenná, ktorá riadi inner padding bottom.
--wje-item-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-item-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-item-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-item-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-item-min-height	Vlastná CSS premenná, ktorá riadi min height.
--wje-item-transition	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.
--wje-item-inner-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.

Sloty

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
error	Slot pre validačný alebo chybový obsah.
helper	Slot pre vlastný obsah helper v komponente.