2024-03-29 14:51:51 +00:00
---
id: html
title: HTML Viewer
---
# HTML Viewer
HTML widget can be used to create your own HTML-CSS layout.
2024-04-09 12:51:56 +00:00
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
## Properties
2024-04-09 12:51:56 +00:00
| < div style = {{ width: " 100px " } } > Property < / div > | < div style = {{ width: " 100px " } } > Description < / div > |
|:------------|:-----------------|
| Raw HTML | The Raw HTML needs to be an HTML. In order to provide styles, one can add inline css to the respective HTML tags. |
2024-03-29 14:51:51 +00:00
**Example:**
```json
<!DOCTYPE html>
< html >
< body >
< main >
< section class = "hero" style = "height:306px;display:flex;justify-content: center;padding:0 1px;align-items: center;text-align:center" >
You can build your custom HTML-CSS template here
< / section >
< / main >
< / body >
< / html >
```
2024-04-09 12:51:56 +00:00
< / div >
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
2024-04-09 12:51:56 +00:00
## Component Specific Actions (CSA)
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
2024-03-29 14:51:51 +00:00
< / div >
2024-04-09 12:51:56 +00:00
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
2024-04-09 12:51:56 +00:00
## Exposed Variables
2024-03-29 14:51:51 +00:00
2024-04-09 12:51:56 +00:00
There are currently no exposed variables for the component.
< / div >
2024-03-29 14:51:51 +00:00
2024-04-09 12:51:56 +00:00
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
2024-04-09 12:51:56 +00:00
## General
### Tooltip
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
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.
2024-03-29 14:51:51 +00:00
< / div >
2024-04-09 12:51:56 +00:00
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
## Layout
2024-04-09 12:51:56 +00:00
| < div style = {{ width: " 100px " } } > Layout < / div > | < div style = {{ width: " 100px " } } > Description < / div > | < div style = {{ width: " 135px " } } > Expected Value < / div > |
|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
2024-03-29 14:51:51 +00:00
| 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}}` |
2024-04-09 12:51:56 +00:00
< / div >
< div style = {{paddingTop:'24px', paddingBottom: ' 24px ' } } >
2024-03-29 14:51:51 +00:00
## Styles
2024-04-09 12:51:56 +00:00
| < div style = {{ width: " 100px " } } > Style < / div > | < div style = {{ width: " 100px " } } > Description < / div > |
|:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2024-03-29 14:51:51 +00:00
| 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}}` . |
:::info
Any property having `Fx` button next to its field can be **programmatically configured** .
:::
2024-04-09 12:51:56 +00:00
< / div >
