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 (in px or %) Width (in px or %). 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. 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 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 4 months ago