Image bubble
This element handles the display for an individual image.
Properties
Name | Type | Description |
---|---|---|
src | string | URL of the image |
placeholderImage | string | A filler image to be shown while the actual image is downloading |
imageStyle | ImageStyle | Styling properties and values of the element |
ImageStyle
Styling properties and values of the element
Name | Description |
---|---|
width | Sets the width of the component |
height | Sets the height of the component |
border | Sets the border of the component |
borderRadius | Sets the border radius of the component |
background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link |
Events
Custom events dispatched by the element
Name | Description |
---|---|
cc-image-clicked | Event emitted when user clicks on the image |
Usage
- Javascript
import '@cometchat/uikit-elements';//import the web elements package.
const getImageURL = event => {
console.log(event.detail.url); //the detail property has the image url
}
//use the element with the custom event
<cometchat-image-bubble cc-image-clicked={getImageURL}></cometchat-image-bubble>