Grouped Icons
- Shows group of icons in popup or parent class.
Example Link
Features/Functionality
- Shows an icon.
- On click of icon, shows other icons;
- Icons are shown in tooltip type popups or in parent div.
- Click event callback will called on click.
- Component is responsive.
- It is cross browser compatible. (IE11, Edge, Firefox, chrome).
Basic Usage
Dependencies
- jquery
- font-awesome
- shared styles
Definition
<cst-s-grouped-icon schema.bind="${schema}"></cst-s-grouped-icon>
Schema Description
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| name | string type | Name of icon to be shown. |
| label | string type | Label to show beside icon. |
| tooltip | string type | Description to show on hover. |
| subscript | any type | Subscript to be shown. |
| superscript | any type | Superscript to be shown. |
| isDisable | boolean type | If icon is disabled. |
| isActiveState | boolean type | If icon is in active state or not. |
| object type | Options for icon component. | |
| onClick | string type | Method to be called on click of child icons. |
| elmInstance | any type | Icon element instance. |
| object type | Options for the component. | |
| childItems | array type | Array of icons to show on click. |
| object type | Access Ctrl for the component. | |
| object type | Theme for the component. | |
| object type | Font for the component. | |
| object type | Style for the component. | |
| object type | Raw Attributes for the component. |
options
| Property | Value | Description | Value |
|---|---|---|---|
| iconShape | box/circle/none | Shape of the background div of the icon. | |
| iconShade | dark/light | Shade of the icon. | |
| labelPosition | bottom/top/left/right | Position of label to be placed. | |
| tooltipPosition | bottom/top/left/right | Position of custom tooltip to be shown. | |
| activeStyle | border/filled/boxBorderTop/boxBorderBottom/boxBorderLeft/boxBorderRight/tabLeft/tabRight/tabBottom/tabTop | Style how active icon to be shown. |
groupIconOptions
| Property | Value | Description | Value |
|---|---|---|---|
| parentClass | string type | Class of parent div to show more icons in same div only. | |
| popupPosition | topLeft/topRight/bottomLeft/bottomRight | Position of the popup. |
Schema Example
let schema = {
id: '',
name: '',
label: '',
tooltip: '',
subscript: '',
superscript: '',
isDisable: true/false,
isActiveState: true/false,
options: {
},
onClick: '',
elmInstance: '',
childItems: [{}],
groupIconOptions: {
parentClass: '',
popupPosition: ''
},
subAccessCtrl: {},
subTheme: {},
subFont: {},
subStyle: {},
subRawAttributes: {}
}