Item

shadow

Item components are blocks that can contain various types of content, including text, icons, avatars, images, inputs, and other standard or custom elements. Item elements are usually found inside List elements.

Basic usage

The sample shows the most common form of wje-item, i.e. a single content line with the default layout and no additional variations.

Separation lines

The lines attribute controls how the bottom separation of an item is rendered. This is especially useful in lists where you need a more subtle or, conversely, more pronounced visual separation of content.

Use with images

The demo combines an item with a medium to make it clear how an image or thumbnail and text content work side by side.

Use with buttons

The sample adds action buttons to the item, so you can see the recommended pattern for a line that also has quick actions.

Use with icons

The demonstration focuses on working with icons in the item and how to align them legibly with text and additional content.

When to use

Use wje-item to display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts, and text equivalents for icons without descriptions.

Recommended practices

• Compress media and use lazy loading for large lists.
• Keep information priorities consistent for tabs and lists.
• Do not repeat the same information in text and icon at the same time without adding value.

Attributes and properties

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

Events

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

Methods

isClickable

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

CSS shadow parts

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

CSS custom variables

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ň.

Slots

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.