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

Use with images

Use with buttons

Use with icons

Attributes and Properties

button

Description	If true, the item will behave like a button.
Attribute	button
Type	boolean
Default	false

disabled

Description	If true, the item cannot be interacted with.
Attribute	disabled
Type	boolean
Default	false

counter

Description	If true, the counter in the entry is displayed.
Attribute	counter
Type	boolean
Default	false

routerDirection

Description	Specifies the navigation direction for the item.
Attribute	router-direction
Type	string
Default	'forward'

type

Description	Specifies the type of item.
Attribute	type
Type	string
Default	'button'

Events

No events available for this component.

Methods

isClickable

Description	Specifies whether the item is clickable.
Signature	isClickable() => boolean

CSS Shadow Parts

Name	Description
native	Refers to the native element of the item.
inner	Refers to the inner part of the item.

CSS Custom Properties

Name	Description
--wje-item-background	Sets the background colour of the item. Accepts any valid CSS color value.
--wje-item-color	Defines the text color for the item. Accepts any valid CSS color value.
--wje-item-padding-start	Specifies the left indentation of the item. Accepts any valid CSS length.
--wje-item-padding-end	Specifies the right offset of the item. Accepts any valid CSS length.
--wje-item-padding-top	Specifies the top indent of the item. Accepts any valid CSS length.
--wje-item-padding-bottom	Specifies the lower indentation of the item. Accepts any valid CSS length.
--wje-item-inner-padding-start	Specifies the left internal offset of the item. Accepts any valid CSS length.
--wje-item-inner-padding-end	Specifies the right internal offset of the item. Accepts any valid CSS length.
--wje-item-inner-padding-top	Specifies the upper internal indentation of the item. Accepts any valid CSS length.
--wje-item-inner-padding-bottom	Specifies the lower internal indentation of the item. Accepts any valid CSS length.
--wje-item-border-radius	Defines the border radius, providing rounded corners for the item.
--wje-item-border-width	Sets the border width of the item. Accepts any valid CSS length.
--wje-item-border-style	Specifies a border style, such as solid, dashed, or dotted.
--wje-item-border-color	Defines the border color of the item. Accepts any valid CSS color value.
--wje-item-min-height	Sets the minimum height of the item for a consistent layout.
--wje-item-transition	Specifies transition effects for the item, for example for hover or focus states.
--wje-item-inner-box-shadow	Adds a shadow effect inside the item for a 3D look.

Slots

Name	Description
``	The default location of the item content.
start	The content slot that appears at the beginning of the item.
end	The slot for the content that appears at the end of the item.
error	Slot for displaying error message.
helper	Slot for displaying auxiliary text.