Icon
An Icon component can be used to add icons. It supports events like on hover and on click.
Properties
| Properties | Description |
|---|---|
| Icon | Use this to choose an icon form the list of available icons. |
Events
| Event | Description |
|---|---|
| On hover | Triggers whenever the cursor is hovered over the icon. |
| On click | Triggers whenever the icon is clicked. |
info
Check Action Reference docs to get the detailed information about all the Actions.
Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
Action | Description | RunJS Query |
|---|---|---|
| click( ) | Regulate the click on the icon. | components.icon1.click() |
| setVisibility( ) | Sets the visibility of the component. | components.icon1.setVisibility(false) |
| setLoading( ) | Sets the loading state of the component. | components.icon1.setLoading(true) |
| setDisable( ) | Disables the component. | components.icon1.setDisable(true) |
Exposed Variables
| Variable | Description | How To Access |
|---|---|---|
| isLoading | Indicates if the component is loading. | {{components.icon1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.icon1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.icon1.isDisabled}} |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a display string. | String |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Style | Description | Expected Value |
|---|---|---|
| Color | Choose the Icon Color | Hex color code or choose from color picker. |
| Alignment | Set the Icon alignment | Select from left, center or right. |
| Padding | Set the padding inside the component | Choose from Default or None. |
| Box shadow | This property adds a shadow to the component. | You can use different values for box shadow property like offsets, blur, spread, and the color code. |
info
Any property having fx button next to its field can be programmatically configured.