User Details
CometChatDetails is a component that provides additional information and settings related to a specific user.
The details screen includes the following elements and functionalities:
- User Information: It displays details about the user. This includes his/her profile picture, name, status, and other relevant information.
- User Actions: The details screen provides actions to block/unblock the user.
Properties
User
You can view details of this particular user
| Name | Type | Description |
|---|---|---|
| user | CometChat.User | View details of this particular CometChat user |
Title
Title for the component
| Name | Type | Description |
|---|---|---|
| title | string | Heading text for the component |
Icon URLs
Custom asset URL used for graphical representation
| Name | Type | Description |
|---|---|---|
| closeButtonIconURL | string | Asset URL for the close icon |
Disable user presence
Turn off the visibility of a user's online status in the chat
| Name | Type | Description |
|---|---|---|
| disableUsersPresence | boolean | When set to true, Users will not be able to see whether a particular user is currently online or offline. |
Data / Templates
Pre-defined structure to serve as a starting point to create the details component.
| Name | Type | Description |
|---|---|---|
| data | CometChatDetailsTemplate | Data model that serve as a starting point of the details component for a particular user |
Custom view
UI component created and customised by the developer to meet your design or functional requirements.
| Name | Type | Description |
|---|---|---|
| subtitleView | Function as PropType<(user?: CometChat.User) => ViewType> | User-defined Vue component to customise the secondary text shown in the default user profile. |
| customProfileView | Function as PropType<(user?: CometChat.User) => ViewType> | User-defined Vue component to customise user profile view. |
Toggle profile view
Switch to hide or show the default user profile.
| Name | Type | Description |
|---|---|---|
| hideProfile | boolean | When set to true, the user profile view will be hidden |
Function callbacks
Functions that can be invoked by the user in response to a specific event or condition.
| Name | Type | Description |
|---|---|---|
| onClose | Function as PropType<() => void> | Override the method that is invoked when user clicks on the close icon. |
| onError | Function as PropType<(error: CometChat.CometChatException) => void> | Override the method that is invoked when an error is encountered within the details component |
Style
Styling properties and values of all the child components
| Name | Type | Description |
|---|---|---|
| avatarStyle | AvatarStyle | Styling properties and values of the Avatar component |
| statusIndicatorStyle | StatusIndicator | Styling properties and values of the StatusIndicator component |
| listItemStyle | ListItemStyle | Styling properties and values of the ListItem component |
| detailsStyle | DetailsStyle | Styling properties and values of the Details component |
Usage
- Vue
//User with uid=kevin
const user = new CometChat.User("kevin");
user.setName("Kevin");
//Pass the user object to the details component
<CometChatDetails :user="user"></CometChatDetails>