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>