List Item

CometChatListItem contains one to three lines of text optionally flanked by icons or other widgets, such as CometChatAvatar, CometChatDate or Text. CometChatAvatar will always be shown in the leading view therefore either one among the avatarURL or avatarName must be provided. The icons (or other widgets) for the list item are defined with the tailView parameter. The first line of text is optional and is specified with title. The value of subtitle is also optional, will occupy the space allocated for an additional line of text or some other widget.

This element is used to display rows of information, such as a contact list, playlist, or menu. They contain Avatar, Status indicator, title, subtitle, tailView and menuView.

Properties

Name	Type	Description
id	string	Unique identifier of the element
avatarURL	string	Image URL for each row item
avatarName	string	Fallback name for the avatar of each row item
statusIndicatorColor	string	Background color of the indicator
statusIndicatorIcon	string	Background icon of the indicator
title	string	Heading text of each row item
isActive	boolean	When set to true, sets the particular row item in the active status
hideSeparator	boolean	When set to true, hides the separator between each individual items
avatarStyle	avatarStyle	Styling properties and values of the avatar element
statusIndicatorStyle	statusIndicatorStyle	Styling properties and values of the status indicator element
listItemStyle	ListItemStyle	Styling properties and values of the element

ListItemStyle

Styling properties and values of the element

Name	Description
width	Sets the width of the element
height	Sets the height of the element
border	Sets the border of the element
borderRadius	Sets the border radius of the element
background	Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
padding	Sets the padding area on all four sides of the component
titleFont	Sets all the different properties of font for the heading text. Reference link
titleColor	Sets the foreground color of heading text.
separatorColor	Sets the background style properties for the separator between the individual items. Reference link
activeBackground	Sets the background style properties of the element when in active state Reference link
hoverBackground	Sets the background style properties of the element on mouseover Reference link

Slots

Placeholder areas within the element's template

Name	Description
subtitleView	Placeholder to display the secondary title. For e.g. Last message in recent chats OR members count of a group
tailView	Placeholder to display the view on the extreme right of the row. For e.g. Unread count as a badge in recent chats
menuView	Placeholder to display the view on mouseover. For e.g. Delete conversation option in recent chats

Events

Events dispatched from the element

Name	Description
cc-listitem-clicked	Event triggered when user clicks on each element

Usage

Javascript

import "@cometchat/chat-uikit-vue"; //import the web elements package.

const clickHandler = event => {
	console.log(event.detail.id )
}

//use the component
<CometChatListItem @cc-listitem-clicked={clickHandler($event)}></CometChatListItem>