Html

Overview of the Html Component

The HTML component allows you to insert custom HTML tags into your application.

Properties

🚧
Important Note!
This document lists the properties specific to this UI component. To check the properties common to most UI components, please refer to the General components document.

You can set the HTML component properties under the Common and Styles tabs:

Common Properties

Property Name	Property Description
Container	Sets the HTML element used as the wrapper for content: No wrapper, div, span, ol, ul, li, iframe, audio, video, fieldset, ion-segment, ion-segment-button, ion-label, ion-chip, ion-badge, ion-item. You can select from the predefined container types or enter your custom container name.
HTML	The content of the HTML component. Click the Edit button to open the HTML editor.
Parse HTML	Click Parse to create Appery.io components from HTML code copied from third-party resources.
AI Assistant	Use the AI Assistant property to quickly generate app UI. You can enter your query or use speech recognition to input your request.
Wrapper Style	Use this to style the HTML component with custom components inside so that the page appearance in the visual editor matches the page appearance on preview. Color CSS Style Display (block, inline-block, inline, flex) Height (in px or %) Width (in px or %)\ This setting is used only within the visual editor and does not affect the actual application.

📘
Note
The Container property is just a component container.
You can use the special keyword %children% to insert child components in the middle of HTML content.

Styles Properties

Under the Styles tab, HTML components can be styled with several attributes:

Property Name	Property Description
Bg Image	Click the Change button to select an uploaded image from Media Manager. Position sets the starting position of a background image: top, bottom, center, left, right, initial, inherit Repeat sets how a background image will be repeated: repeat, repeat-x, repeat-y, no-repeat, space, round, initial, inherit Size specifies the size of the background images: auto, cover, contain, initial, inherit
Text Color	Select a CSS color from the available options: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom, or use the color picker.
Font Size	Enter font size in `px`, `%`, `em`, `vh`, or `vw`.
Font Weight	Set the weight (or boldness) of the font: Normal or Bold.
Line Height	Set the height of a line box in `px`, `%`, `em`, `vh`, or `vw`. This is commonly used to set the distance between lines of text.
Font Style	Set whether a font should be styled with a Normal or Italic face.
Text Decoration	Set the appearance of decorative lines on text using the predefined buttons: None - specifies no line for the text Underline - specifies that the line will be displayed under the text Line-through - specifies that the line will be displayed through the text