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>