Quick View

Quick View — CometChat documentation.

Overview

CometChat’s Quick View component allows you to create a quick overview panel with a title, subtitle, and an optional close button. It extends from the LitElement’s base class.

Attributes

Name	Type	Description
title	string	The title for the Quick View.
subtitle	string	The subtitle for the Quick View.
closeIconURL	string	The URL for the close icon. If not provided, a default close icon will be used.
hideCloseIcon	boolean	A boolean to determine whether to hide the close icon. By default, it is true.
quickViewStyle	QuickViewStyle	An instance of QuickViewStyle class to style the Quick View.

QuickViewStyle

You can pass an instance of the QuickViewStyle class to the quickViewStyle attribute to customize the appearance of the Quick View. The QuickViewStyle class is derived from the BaseStyle class

Name	Description
titleFont	The font of the title.
titleColor	The color of the title.
subtitleFont	The font of the subtitle.
subtitleColor	The color of the subtitle.
closeIconTint	The color of the close icon.
leadingBarTint	The color of the leading bar.
leadingBarWidth	The width of the leading bar.

Events

Name	Description
cc-close-clicked	This event is dispatched when the close button is clicked.

Usage

HTML

<cometchat-quick-view 
[title]="'My Title'" 
[subtitle]="'My Subtitle'" 
[hideCloseIcon]="false"
[quickViewStyle]="quickViewStyle"
(cc-close-clicked)="changeHandler($event)"
></cometchat-quick-view>

JavaScript

import React from 'react';
import '@cometchat/uikit-elements'; //import the web component package.
import { QuickViewStyle } from '@cometchat/uikit-elements'

quickViewStyle = new QuickViewStyle({
    height: "500px",
    width: "300px",
    background: "blue",
    titleFont: '600 13px Inter, sans-serif',
    titleColor: 'white',
    subtitleFont: '400 13px Inter, sans-serif',
    subtitleColor: 'lightgrey',
    closeIconTint: 'white',
    leadingBarTint: 'white',
    leadingBarWidth: '4px',
});

changeHandler = (event: any) => {
  console.log(event.detail.url);
}