List

The List (List) component consists of multiple Item elements and can contain text, buttons, toggles, icons, image thumbnails, and much more. Sheets generally contain items with the same content and group them into a larger whole.

Basic Usage

Nested leaf

Setting the value of the inset property to true adds a margin to the element's surroundings to create a nested list.

Line separation

The lines property modifies the bottom edge of items. Setting it to "full" will show full-width margins, "inset" will show left-padded margins, and "none" will show no margins.

If the lines property is set on the item, this property will take precedence over the property on the sheet.

Attributes and Properties

inset

Description	If true, the element gets an outer offset and rounding.
Attribute	inset
Type	boolean
Default	false

lines

Description	Specifies the style of separator lines between Item elements inside the List element
Attribute	lines
Type	"full" ｜ "inset" ｜ "none" ｜ undefined
Default	undefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--wj-list-background	Background colour of the element
--wj-list-border-radius	Size of the element roundness
--wj-list-inset-padding	Internal offset of the element

Slots

Name	Description
end	The content is placed on the right in the LTR and on the left in the RTL.
start	The content is placed on the left in the LTR and on the right in the RTL.