Icon
- Shows an icon based on the name passed in the schema.
Example Link
Features/Functionality
- Shows an icon based on the name passed in schema.
- Default font-size is '18px';
- Gives Superscript and Subscript of icon.
- On Hover of the icon, tooltip is shown.
- Active icon is shown in different styles.
- Label is shown if given based on positions given.
- Custom tooltip is shown.
- 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-icon schema.bind="${schema}"></cst-s-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 the component. | |
| onClick | string type | Method to be called on click of icon. |
| elmInstance | any type | Icon element instance. |
| 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. |
Schema Example
let schema = {
id: '',
name: '',
label: '',
tooltip: '',
subscript: '',
superscript: '',
isDisable: true/false,
isActiveState: true/false,
options: {
},
onClick: '',
elmInstance: '',
subAccessCtrl: {},
subTheme: {},
subFont: {},
subStyle: {},
subRawAttributes: {}
}