Html

Overview of the Html Component

The HTML component allows inserting custom tags.

Properties

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

Setting the HTML component properties can be done from under Common and/or Styles tabs:

Common Properties

Property Name	Property Description
Container	Set an 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 paste your custom container name.
HTML	Contents of the HTML component. Click the Edit button to open the HTML editor.
Parse HTML	Click Parse to create Appery.io components from any HTML code copied from 3rd 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 it to style the HTML component with custom components inside so that the page appearance in the visual editor corresponds to the page appearance on the preview. Color CSS Style Display(block,inline-block,inline,flex) Height(inpxor%*) Width(inpxor%**). It is used only inside the visual editor and does not have any reflection in the application.

📘
The property Container is just a component container.
You can use a 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 to look like in a specific way:

Property Name	Property Description
Bg Image	Click the Change button to select the uploaded image from Media Manager. Positionsets the starting position of a background image:top,bottom,center,left,right,initial,inherit. Repeatsets how a background image will be repeated:repeat,repeat-x,repeat-y,no-repeat,space,round,initial,inherit*. Sizespecifies the size of the background images:auto,cover,contain,initial,inherit**.
Text Color	Select CSS color from the available colors: 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`, and `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`, and `vw`. It's 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 a text by using the group of predefined buttons: specifies no line for the text specifies that the line will be displayed under the text specifies that the line will be displayed through the text*.

Updated 15 days ago