Message Bubble
Overview
This element is CometChat's very own emoji picker with native emoji support.
Properties
Name | Type | Description |
---|---|---|
emojiData | Array | JSON array of emojis grouped along with the category |
emojiKeyboardStyle | EmojiKeyboardStyle | Styling properties and values of the element |
Events
Events dispatched from the element
Name | Description |
---|---|
cc-emoji-clicked | Event triggered when user clicks on a particular emoji from the keyboard |
EmojiKeyboardStyle
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 |
textFont | Sets all the different properties of font for the category name. Reference link |
textColor | Sets the foreground color of category name. |
iconTint | Sets the tint or color applied to the category icon. |
activeIconTint | Sets the tint or color applied to the currently active category icon. |
Usage
- Javascript
import "@cometchat/uikit-elements"; //import the web elements package.
import { EmojiKeyboardStyle } from "@cometchat/uikit-elements"; //import the EmojiKeyboardStyle class.
const clickHandler = event => {
console.log(event.detail.id);
}
//create style object
const emojiKeyboardStyle = new EmojiKeyboardStyle({
textFont: "500 14px Inter, sans-serif",
textColor: "black",
border: "1px solid green",
width: "500px",
height: "300px"
});
<cometchat-emoji-keyboard
:emojiKeyboardStyle="emojiKeyboardStyle"
@cc-emoji-clicked="clickHandler($event)"></cometchat-emoji-keyboard>