QuickView
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
- 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;