List item
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>