Document Bubble

Document Bubble — CometChat documentation.

This element is a card view consisting of title, subtitle, url, icon and a launch button.

Properties

Name	Type	Description
URL	string	URL of the element
title	string	Title of the element
subtitle	string	Subtitle of the element
buttonText	string	Text on the launch button
iconURL	string	Asset URL for the download icon
hideSeparator	boolean	When set to true, hides the separator which is displayed above the launch button
iconAlignment	DocumentIconAlignment	used to override click callback
documentStyle	documentStyle	Styling properties and values of the element

documentStyle

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
iconTint	Sets the tint or color applied to the download icon of the element
separatorColor	Sets the color of the separator between individual items
titleFont	Sets all the different properties of font for the title text. Reference link
titleColor	Sets the foreground color of title text.
subtitleFont	Sets all the different properties of font for the subtitle text. Reference link
subtitleColor	Sets the foreground color of subtitle text.
buttonTextFont	Sets all the different properties of font for the text on the launch button. Reference link
buttonTextColor	Sets the foreground color of launch button text.
buttonBackground	Sets all background style properties at once, such as color, image, origin and size, or repeat method of the launch button. Reference link

Usage

JavaScript

import '@cometchat/uikit-elements';//import the web component package.

const URL = "https://document.cometchat.io/p/uniqdocid";
const title = "Collaborative Document";

//use the element
<cometchat-document-bubble URL={url} title={title}></cometchat-document-bubble>