Action Sheet

Overview

CometChatActionSheet is a component which presents options in a list and grid mode as per user's choice. By default, CometChatActionSheet is an integrated into CometChatMessageComposer to allow users to send multiple types of media and custom messages.

---

This element is a slide-up pane for presenting the user with a set of actions.

Properties

Name	Type	Description
title	string	Heading text of the element
actions	ActionItem[]	List of actions / options to be made available to the user
layoutMode	Enum {grid,list}	Types of display modes supported
layoutModeIconURL	string	Asset URL for the toggle mode icon
hideLayoutMode	boolean	When set to true, hides the button that toggles the layout
actionSheetStyle	ActionSheetStyle	Styling properties and values of the element

ActionSheetStyle

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
layoutModeIconTint	Sets the tint or color applied to the layout mode indicator icon of the element
titleFont	Sets all the different properties of font for the heading text. Reference link
titleColor	Sets the foreground color of the heading text.
ActionSheetSeparatorTint	Sets the tint of color to the separator displayed in the element

Usage

Javascript

import '@cometchat/uikit-elements';//import the web component package.
import { layoutType } from '@cometchat/uikit-elements';


const action = new CometChatActionItem({id: "attach-file", 
                                        iconURL: "https://img.icons8.com/?size=24&id=37897&format=svg", 
                                        title: "Attach file", 
                                        iconTint: "#e1eb77"});


const actions = [action];//array of actions
const title = "Add to chat";
const layoutModeIconURL = "https://img.icons8.com/?size=24&id=103980&format=svg";

//use the component
<cometchat-action-sheet 
actions={actions}
hideLayoutMode={false} 
layoutMode={layoutType.grid}
title={title}
layoutModeIconURL={layoutModeIconURL}>
</cometchat-action-sheet>