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

​
Properties

NameTypeDescription
titlestringHeading text of the element
actionsActionItem[]List of actions / options to be made available to the user
layoutModeEnum {grid,list}Types of display modes supported
layoutModeIconURLstringAsset URL for the toggle mode icon
hideLayoutModebooleanWhen set to true, hides the button that toggles the layout
actionSheetStyleActionSheetStyleStyling properties and values of the element

​
ActionSheetStyle

Styling properties and values of the element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the border radius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
layoutModeIconTintSets the tint or color applied to the layout mode indicator icon of the element
titleFontSets all the different properties of font for the heading text. Reference link
titleColorSets the foreground color of the heading text.
ActionSheetSeparatorTintSets 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>
⌘I