List
CometChatList
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 |
ListStyle
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>