Skip to main content

​
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

NameTypeDescription
titlestringThe title for the Quick View.
subtitlestringThe subtitle for the Quick View.
closeIconURLstringThe URL for the close icon. If not provided, a default close icon will be used.
hideCloseIconbooleanA boolean to determine whether to hide the close icon. By default, it is true.
quickViewStyleQuickViewStyleAn 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
NameDescription
titleFontThe font of the title.
titleColorThe color of the title.
subtitleFontThe font of the subtitle.
subtitleColorThe color of the subtitle.
closeIconTintThe color of the close icon.
leadingBarTintThe color of the leading bar.
leadingBarWidthThe width of the leading bar.

​
Events

NameDescription
cc-close-clickedThis event is dispatched when the close button is clicked.

​
Usage

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

function App() {
  // Define the styles
  const 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',
  });

  // Define the event handler
  const handleQuickViewClose = () => {
    console.log('Close button clicked');
  }

  return (
    <div className="App">
      <cometchat-quick-view 
        title="My Title" 
        subtitle="My Subtitle" 
        hideCloseIcon="false"
        quickViewStyle=${quickViewStyle}
        @cc-close-clicked=${handleQuickViewClose}
      ></cometchat-quick-view>
    </div>
  );
}

export default App;
⌘I