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>