Dropdown
- Shows dropdown with single and multi select.
Example Link
Features/Functionality
- Shows dropdown.
- Range of selections can be given.
- Component is responsive.
- It is cross browser compatible. (Edge, Firefox, chrome).
Basic Usage
Dependencies
- jquery
- font-awesome
- shared styles
Definition
<cst-s-dropdown schema.bind="${schema}"></cst-s-dropdown>
Schema Description
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| label | string type | Label to show in component. |
| array of objects type | Data to show in list. | |
| object type | APIs to get data. | |
| object type | Options for component. | |
| object type | Number of values that can be selected. | |
| isDisabled | boolean type | Is dropdown disabled. |
| isRequired | boolean type | Is selection in dropdown required. |
| selectionType | multi/single/range | Type of selection required. |
| selectedValues | array type | Selected values. |
| object type | Style properties of component. | |
| onFocusOut | string type | Method to be called on focus out. |
| elmInstance | any type | Icon element instance. |
| customParentContext | any type | Parent Context to call callback methods. |
data
| Property | Value | Description | Value |
|---|---|---|---|
| id | string type | Id of option | |
| value | string type | Value of option | |
| label | string type | Label to be shown of option | |
| isSelected | boolean type | Is option selected by default |
dataAPI
| Property | Value | Description | Value |
|---|---|---|---|
| idAPI | object type | API details to get all options ids | |
| valuesAPI | object type | API details to get all options values | |
| searchAPI | object type | API details to be called on search |
selectionRange
| Property | Value | Description | Value |
|---|---|---|---|
| min | number type | Minimum number of selections | |
| max | number type | Maximum number of selections |
options
| Property | Value | Description | Value |
|---|---|---|---|
| isAutoSuggest | boolean type | Auto suggest on/off | |
| showSelectedSection | boolean type | Show selected section/Chips | |
| isSearch | boolean type | Search bar needed | |
| maxChars | number type | Maximum characters to be shown in rows/chips | |
| isRadio | boolean type | Need radio buttons | |
| isCheckbox | boolean type | Need checkboxes |
style
| Property | Value | Description | Value |
|---|---|---|---|
| width | number type | Width of dropdown | |
| height | number type | Height of dropdown list |
Schema Example
let schema = {
id: '',
data: [
{
id: '',
value: '',
label: ''
}
],
dataAPI: {
idAPI:{},
valuesAPI:{},
searchAPI:{}
},
selectionRange: {
min:'',
max:''
},
isDisabled: true/false,
isRequired: true/false,
options: {
isAutoSelect: true/false,
showSelectedSelection: true/false,
isSearch: true/false,
maxChars: ''
},
style: {
width:'',
height: ''
}
}