HTML widget
The HTML Render Widget enables seamless rendering of HTML code within your application, providing a dynamic and interactive experience for users.
Test in Kitchen Sink (opens in a new tab)
Properties
| Property | Type | Description |
|---|---|---|
| text | string | Enter the HTML text |
| cssStyles | List of cssStyle | Enter the CSS to interact with HTML |
cssStyle
| Property | Type | Description |
|---|---|---|
| selector | String | Equivalent to the CSS selector. To select any given tag using either tag name, class name or id of that tag |
| properties | properties | The css properties to apply to a selected tag. |
properties
| Property | Type | Description |
|---|---|---|
| backgroundColor | string | Sets the background color of an element. Useful for emphasizing or styling page sections. |
| color | string | Defines the text color within an element, impacting readability and visual hierarchy. |
| counterIncrement | string | Specifies the increment value for counters, facilitating dynamic list numbering or tracking. |
| counterReset | string | Determines the reset value for counters, useful for restarting or initializing counting sequences. |
| direction | string | Sets the text direction, crucial for proper alignment in multilingual content. |
| display | string | Specifies the box model used for an element, influencing its layout and rendering behavior. |
| fontFamily | string | Defines the font family for text, allowing customization of the typeface for stylistic or thematic consistency. |
| fontFeatureSettings | string | Enables advanced typographic features in fonts, providing fine control over ligatures and stylistic elements. |
| fontSize | string | Sets the font size within an element, influencing the overall visual hierarchy and readability of content. |
| fontStyle | string | Specifies the style of the font, such as italic or normal, contributing to the visual emphasis of displayed text. |
| fontWeight | string | Sets the thickness of characters within a text element, allowing for varied emphasis and hierarchy in content. |
| height | string | Defines the height of an element, offering control over vertical dimensions and aspect ratios. |
| letterSpacing | string | Adjusts the spacing between characters in text, providing fine-tuned control over readability and aesthetics. |
| listStyleImage | string | Sets an image as the list-item marker, allowing customization of list styles with distinctive visual markers. |
| listStyleType | string | Defines the type of marker or style for list items, contributing to the overall appearance and theme of content lists. |
| listStylePosition | string | Sets the position of the list-item marker, influencing its placement in relation to list item content and surroundings. |
| margin | string | Sets the margin outside an element's border, controlling spacing between the element and its neighboring elements. |
| padding | string | Defines the padding inside an element's border, ensuring space between the element's content and its border. |
| textAlign | string | Aligns text within an element, controlling horizontal positioning such as left-aligned, center-aligned, or right-aligned. |
| textDecoration | string | Adds decoration to text, like underline or overline, enhancing visual appeal or conveying additional information. |
| textDecorationColor | string | Sets the color of the text decoration, allowing coordination with the document's color scheme. |
| textDecorationStyle | string | Defines the style of the text decoration, influencing its visual appearance with options like solid, dashed, or dotted lines. |
| textDecorationThickness | string | Specifies the thickness of the text decoration, providing control over its visual prominence. |
| textOverflow | string | Defines how text content that overflows its container should be handled, indicating options like ellipsis or clip. |
| textShadow | string | Adds a shadow to text for emphasis, enhancing legibility and visual impact of text elements within a design or layout. |
| textTransform | string | Controls the capitalization of text, allowing options like uppercase or lowercase to achieve stylistic preferences. |
| verticalAlign | string | Aligns the vertical positioning of inline elements, ensuring proper alignment in relation to surrounding content. |
| whiteSpace | string | Controls handling of white space inside an element, influencing text wrapping, line breaks, and spacing for optimal readability. |
| width | string | Defines the width of an element, offering control over horizontal dimensions and aspect ratios. |
| wordSpacing | string | Adjusts spacing between words in text, providing control over the visual appearance and readability of textual content. |
| lineHeight | string | Sets the height of a line of text, influencing overall vertical spacing and readability within an element. |
| maxLines | string | Limits the number of lines for multiline text, controlling display and preventing excessive expansion of text content. |
styles
| Property | Type | Description |
|---|---|---|
| expanded | boolean | If the parent is a Row or Column, this flag will stretch this widget in the appropriate direction. (e.g stretch horizontally for parent of type Row) |
| borderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. |
| borderColor | integer or string | Sets the border color, starting with '0xFF' for full opacity. transparent black blue white red grey teal amber pink purple yellow green brown cyan indigo lime orange |
| borderWidth | integer | Thickness of the border. Minimum value should be 0. |
| shadowColor | integer or string | Sets the box shadow color starting with '0xFF' for full opacity. transparent black blue white red grey teal amber pink purple yellow green brown cyan indigo lime orange |
| shadowOffset | array | The values in array define the horizontal and vertical offset of the shadow. Example: if the shadowOffset is set to [2, 4], the shadow will be offset by 2 pixels horizontally and 4 pixels vertically from its original position. |
| shadowStyle | string | The blur style to apply on the shadow normal, solid, outer, inner |
| stackPositionTop | integer | The distance of the child's top edge from the top of the stack. This is applicable only for Stack's children. |
| stackPositionBottom | integer | The distance that the child's bottom edge from the bottom of the stack. This is applicable only for Stack's children. |
| stackPositionLeft | integer | The distance that the child's left edge from the left of the stack. This is applicable only for Stack's children. |
| stackPositionRight | integer | The distance that the child's right edge from the right of the stack. This is applicable only for Stack's children. |
| backgroundImage | object | Background image of the box. see properties |
| backgroundGradient | object | Background gradient of the box see properties |
| backgroundColor | integer or string | Background color of the box. which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. transparent black blue white red grey teal amber pink purple yellow green brown cyan indigo lime orange |
| alignment | string | The alignment of the widget relative to its parent. topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight |
| visible | boolean | Toggle a widget visibility on/off. Note that an invisible widget will not occupy UI space, unless the visibilityTransitionDuration is specified. |
| visibilityTransitionDuration | number | Specify the duration in seconds when a widget animates between visible and not visible state. Note that setting this value will cause the widget to still occupy the UI space even when it is not visible. |
| elevation | integer | The z-coordinate at which to place this material relative to its parent. A non-zero value will show a shadow, with its size relative to the elevation value. Minimum value: 0, Maximum value: 24 |
| elevationShadowColor | integer or string | The shadow color for the elevation, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. transparent black blue white red grey teal amber pink purple yellow green brown cyan indigo lime orange |
| elevationBorderRadius | string or integer | The border radius of the widget.This can be specified using CSS-like notation with 1 to 4 integers. Minimum value: 0. |
| margin | string or integer | Margin with CSS-style notation |
| padding | string or integer | Padding with CSS-style value |
| width | integer | The width property determines the horizontal size of an element, allowing control over its width dimension within the layout. |
| height | integer | The height property determines the vertical size of an element, allowing control over its height dimension within the layout. |
| captureWebPointer | boolean | Applicable for Web only. When overlaying widgets on top of certain HTML container (e.g. Maps), the mouse click is captured by the HTML container, causing issue interacting with the widget. Use this to capture and maintain the mouse pointer on your widget. |
| headingText | object | Set the text style for the heading text.see properties |
| dataText | object | Set the text style for the data item text. see properties |