Dropdown v2
- Shows menus and dropdowns.
Example Link
Features/Functionality
- Shows menus and dropdown.
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. |
| selectionType | multi/single/range | Type of selection required. |
| selectedValues | array type | Selected values. |
| object type | Number of values that can be selected. | |
| array of objects type | Data to show in list. | |
| object type | Options for component. | |
| isDisabled | boolean type | Is dropdown disabled. |
| onClick | string type | Method to be called on focus out. |
| elmInstance | any type | Icon element instance. |
| customParentContext | any type | Parent Context to call callback methods. |
selectionRange
| Property | Value | Description | Value |
|---|---|---|---|
| min | number type | Minimum number of selections | |
| max | number type | Maximum number of selections |
data
| Property | Value | Description |
|---|---|---|
| id | string type | Id of option |
| levelId | string type | Id of level |
| levelType | group/value | Type of level |
| value | string type | Value of item |
| label | string type | Label to be shown of item |
| isSelected | boolean type | Is option selected by default |
| title | string type | Hover value |
| imgSrc | string type | Image Source to be shown |
| iConSchema | icon type | Icon to be shown |
| additionalData | object type | Any Additional Data |
| clickUrl | string type | URL to be opened on click |
| childItems | array of objects type | Child Items |
options
| Property | Value | Description |
|---|---|---|
| maxChars | number type | Maximum characters to be shown. |
| object type | Options based on levels | |
| isRadio | boolean type | Need radio buttons |
| isCheckbox | boolean type | Need checkboxes |
levelOptions
| Property | Value | Description |
|---|---|---|
| displayType | horizontal/vertical | How to Show data |
| groupSeparator | blank/solid/dashed | Separator between groups |
| valueSeparator | blank/solid/dashed/dotted/starred | Separator between values |
| headingValSeparator | blank/solid/dashed/dotted/starred | Separator between values |
| splitGroupValues | boolean type | Group Value to be splitted in next column |
| autoLoadChild | boolean type | Values to be shown |
| groupHeadingStyle | filled/underlined | Style of group heading |
| childItemsType | arrows/colorHighlight/colorFill | Style of showing child items relation |
| itemsAlignment | left/right | Alignment of the text |
| maxValues | number type | Maximum values |
| maxGroups | number type | Maximum Groups |
| childIndentation | top/adjacent | Where should child elements start |
| object type | Style of the element. |
style
| Property | Value | Description |
|---|---|---|
| bgColor | string type | Background color of child items |
| color | string type | Color of child items |
| height | number type | Height of the child items |
| width | number type | Width of the child items |
Schema Example
let schema = {
id: '',
type: 'menu',
data: [
{
id: '1',
levelId: 'W_STATE'
label:'Karnataka',
levelType: 'value',
value: 'kar',
childItems: [
{
id: '1',
levelId: 'W_CITY'
label:'Bangalore',
levelType: 'value',
value: 'blr',
}
]
},
{
id: '1',
levelId: 'W_STATE'
label:'Kerela',
levelType: 'value',
value: 'ker',
childItems: [
{
id: '1',
levelId: 'W_CITY'
label:'Thiruvananthpuram',
levelType: 'value',
value: 'thir',
}
]
},
],
options: {
levelOptions: {
W_STATE: {
displayStyle: 'horizontal',
splitGroupValues: true,
groupHeadingStyle: 'filled'
},
W_CITY: {
displayStyle: 'horizontal',
autoLoadChild: true
}
}
}
}