Skip to main content

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

Atribúty a Vlastnosti

button

DescriptionIf true, the item will behave like a button.
Attributebutton
Typeboolean
Defaultfalse

disabled

DescriptionIf true, the item cannot be interacted with.
Attributedisabled
Typeboolean
Defaultfalse

counter

DescriptionIf true, the counter in the entry is displayed.
Attributecounter
Typeboolean
Defaultfalse

routerDirection

DescriptionSpecifies the navigation direction for the item.
Attributerouter-direction
Typestring
Default'forward'

type

DescriptionSpecifies the type of item.
Attributetype
Typestring
Default'button'

Eventy

No events available for this component.

Metódy

isClickable

DescriptionSpecifies whether the item is clickable.
SignatureisClickable() => boolean

CSS Shadow Parts

NameDescription
nativeRefers to the native element of the item.
innerRefers to the inner part of the item.

CSS Custom Vlastnosti

NameDescription
--wje-item-backgroundSets the background colour of the item. Accepts any valid CSS color value.
--wje-item-colorDefines the text color for the item. Accepts any valid CSS color value.
--wje-item-padding-startSpecifies the left indentation of the item. Accepts any valid CSS length.
--wje-item-padding-endSpecifies the right offset of the item. Accepts any valid CSS length.
--wje-item-padding-topSpecifies the top indent of the item. Accepts any valid CSS length.
--wje-item-padding-bottomSpecifies the lower indentation of the item. Accepts any valid CSS length.
--wje-item-inner-padding-startSpecifies the left internal offset of the item. Accepts any valid CSS length.
--wje-item-inner-padding-endSpecifies the right internal offset of the item. Accepts any valid CSS length.
--wje-item-inner-padding-topSpecifies the upper internal indentation of the item. Accepts any valid CSS length.
--wje-item-inner-padding-bottomSpecifies the lower internal indentation of the item. Accepts any valid CSS length.
--wje-item-border-radiusDefines the border radius, providing rounded corners for the item.
--wje-item-border-widthSets the border width of the item. Accepts any valid CSS length.
--wje-item-border-styleSpecifies a border style, such as solid, dashed, or dotted.
--wje-item-border-colorDefines the border color of the item. Accepts any valid CSS color value.
--wje-item-min-heightSets the minimum height of the item for a consistent layout.
--wje-item-transitionSpecifies transition effects for the item, for example for hover or focus states.
--wje-item-inner-box-shadowAdds a shadow effect inside the item for a 3D look.

Sloty

NameDescription
``The default location of the item content.
startThe content slot that appears at the beginning of the item.
endThe slot for the content that appears at the end of the item.
errorSlot for displaying error message.
helperSlot for displaying auxiliary text.