Modal

Overview

This element renders its children component in front of the backdrop element.

Properties

Name	Type	Description
closeIconURL	string	Asset URL for the close icon
closeOnBackdropClick	boolean	When set to true, closes the modal when user clicks on the backdrop element
modalStyle	ModalStyle	Styling properties and values of the element

ModalStyle

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
boxShadow	Sets shadow effects around the element
closeIconTint	Sets the tint or color applied to the close icon
titleFont	Sets all the different properties of font for the heading text. Reference link
titleColor	Sets the foreground color of heading text.

Events

Events triggered by the element

Name	Description
cc-modal-close-clicked	Event triggered when user closes the modal element

Usage

HTML

<cometchat-modal
[closeIconURL]="closeIconURL"
[modalStyle]="modalStyle"
></cometchat-modal>

Javascript

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

closeIconURL = "https://img.icons8.com/?size=24&id=52134&format=png";
modalStyle = new ModalStyle({
width: "500px",
height: "500px",
background: "white"
});