Skip to main content

ListItemGroup

<ui5-li-group> | Since 2.0.0

The ui5-li-group is a special list item, used only to create groups of list items.

This is the item to use inside a ui5-list.

ES6 Module Import​

import "@ui5/webcomponents/dist/ListItemGroup.js";

Properties​

headerText​

DescriptionDefines the header text of the ui5-li-group.
Typestring | undefined
Defaultundefined

headerAccessibleName​

DescriptionDefines the accessible name of the header.
Typestring | undefined
Defaultundefined

Slots​

default​

DescriptionDefines the items of the ui5-li-group.
TypeArray<ListItemBase>
DescriptionDefines the header of the component.
Note: Using this slot, the default header text of group and the value of headerText property will be overwritten.
TypeArray<ListItemBase>

Events​

move-over​

DescriptionFired when a movable list item is moved over a potential drop target during a dragging operation.
If the new position is valid, prevent the default action of the event using preventDefault().
TypeCustomEvent<ListItemGroupMoveEventDetail>
Parameterssource: object
Contains information about the moved element under element property.
destination: object
Contains information about the destination of the moved element. Has element and placement properties.
Since2.1.0
BubblesYes
CancelableYes - via preventDefault()

move​

DescriptionFired when a movable list item is dropped onto a drop target.
Note: move event is fired only if there was a preceding move-over with prevented default action.
TypeCustomEvent<ListItemGroupMoveEventDetail>
Parameterssource: object
Contains information about the moved element under element property.
destination: object
Contains information about the destination of the moved element. Has element and placement properties.
Since2.1.0
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
headerUsed to style the header item of the group