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
- Javascript
import '@cometchat/uikit-elements';//import the web component package.
import { ModalStyle } from '@cometchat/uikit-elements';
const closeIconURL = "https://img.icons8.com/?size=24&id=52134&format=png";
const modalStyle = new ModalStyle({
width: "500px",
height: "500px",
background: "white"
});
<cometchat-modal :closeIconURL="closeIconURL" :modalStyle="modalStyle"></cometchat-modal>