Skip to main content

Dropdown

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

Properties

NameTypeDescription
optionsArray of stringList of options to choose from. These will appear on click.
arrowIconURLstringAsset URL of the arrow icon
dropdownStyleDropdownStyleStyling properties and values of the element

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
arrowIconTintSets the color applied to the arrow icon
textFontSets all the different properties of font for the option text. Reference link
textColorSets the foreground color of option text.
activeTextFontSets all the different properties of font for the option text. Reference link
activeTextColorSets the foreground color of the active option text.
hoverTextFontSets all the different properties of font for the option text on mouseover. Reference link
hoverTextColorSets the foreground color of the active option text on mouseover.
hoverTextBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method . Reference link
optionBackgroundSets all background style properties at once, such as color, image, origin and size, or repeat method for each option. Reference link
optionBorderSets the border of each option in the element
optionHoverBorderSets the border of option when user hovers on it
optionBorderRadiusSets the border radius of the option in the element
optionHoverBorderRadiusSets the border radius of option when user hovers on it

Events

Events triggered by the element

NameDescription
cc-dropdown-changedTriggered when the value of the element changes

Usage

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

const dStyle = new DropdownStyle({

});

const changeHandler = event => {
console.log(event.detail.value);
}

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