Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-21 13:37:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

docs: update component info and styling

Browse source
This commit is contained in:
JP-sDEV 2024-10-18 11:47:20 -04:00
parent 4609453852
commit d0e047a549
2 changed files with 28 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
docs/docs/widgets/code-editor.md
View file

@ -4,7 +4,7 @@ title: Code Editor
---
# Code Editor
**Code Editor** widget is a versatile text editor for editing code and supports several languages.
**Code Editor** Component is a versatile text editor for editing code and supports several languages.
<div style={{textAlign: 'center'}}>
@ -12,12 +12,12 @@ title: Code Editor
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Properties
:::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 style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
@ -166,7 +166,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Component Specific Actions (CSA)
@ -174,46 +174,48 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Exposed Variables
| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
|:----------- |:----------- |:---------- |
| value | This variable holds the value whenever the user inputs anything on the code-editor . | Access the value dynamically using JS: `{{components.codeeditor1.value}}`|
| value | Holds the value of the user inputs in the code-editor. | Access the value dynamically using JS: `{{components.codeeditor1.value}}`|
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
</div>
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
<div style={{paddingTop:'24px'}}>
## Layout
| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
|:----------- |:----------- |
| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine 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
| <div style={{ width:"100px"}}> Styles </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
|:----------- |:----------- |:----------- |
| 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 be visible after the app is deployed. | By default, it's set to `{{true}}` |
| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
| Border radius | Modifies the border radius of the editor. The field expects only numerical value from `1` to `100`. | Default is `0`. |
</div>

20
docs/versioned_docs/version-2.5.0/widgets/code-editor.md
View file

@ -4,7 +4,7 @@ title: Code Editor
---
# Code Editor
Code Editor widget is a versatile text editor for editing code and supports several languages.
Code Editor component is a versatile text editor for editing code and supports several languages.
<div style={{textAlign: 'center'}}>
@ -15,7 +15,7 @@ Code Editor widget is a versatile text editor for editing code and supports seve
## Properties
:::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 style={{textAlign: 'center'}}>
@ -171,9 +171,9 @@ Any property having `Fx` button next to its field can be **programmatically conf
### General
#### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
<div style={{textAlign: 'center'}}>
@ -191,8 +191,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
| Layout | description |
| ----------- | ----------- |
| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
---
## Styles
@ -204,15 +206,15 @@ Under the <b>General</b> accordion, you can set the value in the string format.
| Styles | description |
| ----------- | ----------- |
| 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 be visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |
## Exposed Variables
| Variables | Description |
| ----------- | ----------- |
| value | This variable holds the value whenever the user inputs anything on the code-editor . You can access the value dynamically using JS: `{{components.codeeditor1.value}}`|
| value | Holds the value of the user inputs in the code-editor. Access the value dynamically using JS: `{{components.codeeditor1.value}}`|
## Component specific actions (CSA)