Action sheet
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>