From 3629046d8429ffff37eb1fdfeb2e1e117b4ca537 Mon Sep 17 00:00:00 2001 From: sikehish Date: Wed, 16 Oct 2024 19:36:53 +0530 Subject: [PATCH] docs: content updates made in icon.md --- docs/docs/widgets/icon.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/docs/widgets/icon.md b/docs/docs/widgets/icon.md index e4d7aa3278..6b788688c2 100644 --- a/docs/docs/widgets/icon.md +++ b/docs/docs/widgets/icon.md @@ -3,7 +3,7 @@ id: icon title: Icon --- -An **Icon** widget can be used to add icons(sourced from icon library). It supports events like on hover and on click. +An **Icon** component can be used to add icons(sourced from icon library). It supports events like on hover and on click.
@@ -19,14 +19,12 @@ An **Icon** widget can be used to add icons(sourced from icon library). It suppo ## Events -To add an event, click on the Icon widget's configuration handle to open the widget properties on the components drawer on the right. Go to the **Events** section and click on **+ Add handler**. +The Icon component supports the following events: -The Icon widget supports the following events: - -|
Event
|
Description
| -| :------------------------------------------ | :--------------------------------------------------------------- | -| On hover | This event is triggered when the cursor is hovered over the icon | -| On click | This event is triggered when the icon is clicked | +|
Event
|
Description
| +| :------------------------------------------ | :----------------------------------------------------- | +| On hover | Triggers whenever the cursor is hovered over the icon. | +| On click | Triggers whenever the icon is clicked. | Just like any other event on ToolJet, you can set multiple handlers for any of the above-mentioned events. @@ -61,7 +59,7 @@ There are currently no exposed variables for the component. ## General -Tooltip: Set a tooltip text to specify the information when the user moves the mouse pointer over the widget. +Tooltip: Set a tooltip text to specify the information when the user moves the mouse pointer over the component.
@@ -78,13 +76,15 @@ There are currently no exposed variables for the component.
+--- + ## Styles -|
Style
|
Description
|
Expected Value
| -| :------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -| Icon color | You can change the color of the Icon widget by entering the Hex color code or choosing a color of your choice from the color picker. | -| Visibility | This is to control the visibility of the widget. | If `{{false}}` the widget will not visible after the app is deployed. | It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. | -| Box shadow | This property adds a shadow to the widget. | You can use different values for box shadow property like offsets, blur, spread, and the color code. | +|
Style
|
Description
|
Expected Value
| +| :------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | +| Icon color | You can change the color of the Icon component by entering the Hex color code or choosing a color of your choice from the color picker. | +| Visibility | This is to control the visibility of the component. | If `{{false}}` the component will not visible after the app is deployed. | It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. | +| 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**.