Update link.md

This commit is contained in:
Cyphrr_07 2024-10-15 20:20:50 +05:30 committed by GitHub
parent 0f72d89ecd
commit 76f008dc19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -5,9 +5,9 @@ title: Link
# Link
The **Link** widget allows you to add a hyperlink and navigate to the external URL.
The **Link** component allows you to add a hyperlink and navigate to the external URL.
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Properties
@ -19,10 +19,9 @@ The **Link** widget allows you to add a hyperlink and navigate to the external U
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Events
To add an event to a link, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
|:----------- |:----------- |
@ -35,7 +34,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Component Specific Actions (CSA)
@ -47,7 +46,7 @@ Following actions of link component can be controlled using the component specif
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Exposed Variables
@ -55,7 +54,7 @@ There are currently no exposed variables for the component.
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## General
### Tooltip
@ -66,18 +65,18 @@ Under the <b>General</b> accordion, you can set the value in the string format.
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Layout
| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Styles
@ -86,10 +85,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
| Text color | You can change the background color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
| Text size | By default, the text size is set to 14. You can enter any value from 1-100 to set custom text size. |
| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always** |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
:------------------------------------------------------------------------------------------------------------- |
:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
Any property having **fx** button next to its field can be **programmatically configured**.
:::
</div>
</div>