Dropdown

Overview

This element is a stylised version of the select component. It allows the user to select one option from a list.

Properties

Name	Type	Description
options	Array of string	List of options to choose from. These will appear on click.
arrowIconURL	string	Asset URL of the arrow icon
dropdownStyle	DropdownStyle	Styling properties and values of the element

DropdownStyle

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
arrowIconTint	Sets the color applied to the arrow icon
textFont	Sets all the different properties of font for the option text. Reference link
textColor	Sets the foreground color of option text.
activeTextFont	Sets all the different properties of font for the option text. Reference link
activeTextColor	Sets the foreground color of the active option text.
hoverTextFont	Sets all the different properties of font for the option text on mouseover. Reference link
hoverTextColor	Sets the foreground color of the active option text on mouseover.
hoverTextBackground	Sets all background style properties at once, such as color, image, origin and size, or repeat method . Reference link
optionBackground	Sets all background style properties at once, such as color, image, origin and size, or repeat method for each option. Reference link
optionBorder	Sets the border of each option in the element
optionHoverBorder	Sets the border of option when user hovers on it
optionBorderRadius	Sets the border radius of the option in the element
optionHoverBorderRadius	Sets the border radius of option when user hovers on it

Events

Events triggered by the element

Name	Description
cc-dropdown-changed	Triggered when the value of the element changes

Usage

HTML

<cometchat-dropdown 
[options]="['Red', 'Orange', 'Green', 'Blue']"
(cc-dropdown-changed)="changeHandler($event)"
/>

Javascript

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

changeHandler = (event: any) => {
  console.log(event.detail.url);
}