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

Použitie s obrázkami

Použitie s tlačidlami

Použitie s ikonami

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

labelColorStyles

Popis	Riadi farebné štýlovanie súvisiace s voľbou label-color-styles.
Atribút	label-color-styles
Typ	object
Predvolené	{}

inheritedAriaAttributes

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	inherited-aria-attributes
Typ	object
Predvolené	{}

multipleInputs

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

focusable

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

button

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

disabled

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

counter

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

routerDirection

Popis	Nastavuje textovú hodnotu uloženú vo voľbe router-direction.
Atribút	router-direction
Typ	string
Predvolené	'forward'

type

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

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.