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
- Javascript
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)" />