Button Group
Overview
This element is grouping of buttons together in a single line.
Properties
Name | Type | Description |
---|---|---|
data | Array of any: {id,buttonText,hoverText,iconURL,onClick} | Array of button element properties |
buttonGroupStyle | ButtonGroupStyle | Styling properties and values of the element |
ButtonGroupStyle
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 of the element. Reference link |
iconTint | Sets the tint or color applied to the element |
buttonTextFont | Sets all the different properties of font of text appearing on each button Reference link |
buttonTextColor | Sets the foreground color for each button. |
buttonBorder | Sets the border for each button |
buttonBorderRadius | Sets the border radius for each button |
buttonBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method for each button. Reference link |
activeButtonTextFont | Sets all the different properties of font of text appearing on the button with an active state Reference link |
activeButtonTextColor | Sets the foreground color of the text appearing on the button with an active state. |
activeButtonBorder | Sets the border on the button with an active state |
activeButtonBorderRadius | Sets the border radius of the button with an active state |
activeButtonBackground | Sets all background style properties at once, such as color, image, origin and size, or repeat method of button with an active state. Reference link |
activeButtonBoxShadow | Sets shadow effects around the button with an active state |
buttonSeparatorColor | Sets the foreground color of the divider line that appears between each individual button element |
Events
Name | Description |
---|---|
cc-button-group-clicked | Event triggered when user clicks on any of the button within the element |
Usage
- Javascript
import '@cometchat/uikit-elements';//import the web component package.
import { ButtonGroupStyle } from '@cometchat/uikit-elements';
const editMessage = event => {
//perform appropriate action
}
const viewMore = event => {
//perform appropriate action
}
const buttonGroup = [
{
id = "edit",
iconURL = "https://img.icons8.com/?size=24&id=21076&format=svg",
onClick = "editMessage"
},
{
id = "more",
buttonText = "More",
hoverText = "View more options",
onClick = "viewMore"
}
];
<cometchat-button-group :data="buttonGroup"></cometchat-button-group>