GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
Guides
Start typing to search…

Ionic UI Components General Properties

This section provides an overview of the properties that are common for most Ionic UI components available in Appery.io

Introduction

Every Appery.io UI component has its own properties: some are available for most components, and others are specific to a particular component (the full list of them can be found in this document).

👍

Important Note!

This section describes the properties that are common to most UI components.
To check for the properties that are specific to particular UI components please check this component's document page:

All the UI components available in the Visual App Builder feature further subdivision into common properties and properties related to the component's styling.
Common properties are grouped under the component's PROPERTIES Common tab while the properties used to define styling can be found under the Styles tab:

The general Common properties belonging to most UI components available in the Visual App Builder include:

Property Name

Property Description

Comp. Name

The mandatory property used for identifying the component. When you drag and drop the component from the components PALETTE the Appery.io Visual Builder gives it a standard name (e.g. GoogleMap1, Image1, etc.). It’s beneficial to rename the components so that you could easily identify them.
This property exists inside the visual editor only and does not have any reflection in an application.

Visible

Set to True to determine that the component is visible on the page.
For more details, read here.

Disabled

Every component on the page is enabled by default. You may need to disable components.
If set to true, the user cannot interact with the component.
For more details, read here.

Text

The item text.

Text I18n

If set to true then use the Text property for internationalization.

Text in Editor

This text is shown only in the editor and does not have any reflection in the application. For more details, check our YouTube video here.

Slot

Position inside another component. It can be set to Fixed.
Some components can have different settings: Start or End.

The general Styles properties belonging to most UI components available in the Visual App Builder include:

Property Name

Property Description

Class

The Class property allows listing different classes.
Check this link for Ionic CSS utility classes.

Mode

Determine which platform styles to use. Possible values are iOS or MD.

Margin

Set the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.

Padding

Set the card padding area in px, %, em, vh, and vw:

  • *All sides,Top,Right,Bottom,Left**.

Opacity

Set the opacity of an element. Opacity is the degree to which the content behind an element is hidden.
Opacity value must be in the range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.

Bg Color

Color to use from your application's color palette. Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom, use the Color-picker, or enter your custom color name.

Display

Set the display behavior (the type of rendering box) of an element by using the group of predefined buttons:

  • *block** - element starts on a new line and takes up the whole width
  • *inline-block** - element itself is formatted as an inline element but width and height values can be applied
  • *inline** - no height and width properties will have an effect.

Position

Set the position of an element. The possible values are:

  • *Type- sets how an element is positioned in a document:Static,Relative,Fixed,Absolute, orSticky**.
    Set the chart position in px, %, em, vh, and vw: Top,Right,Bottom,**Left**.

Color

Color to use from your application's color palette. Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom, use the Color-picker, or enter your custom color name.

Width/Height

  • *Min Width** - sets the minimum width of an element in px, %, em, vh, and vw.
    • Width**- sets the width of an element inpx, %, em, vh, and vw.
      The default value is **300**vw.
  • *Max Width** - sets the maximum width of an element in px, %, em, vh, and vw.
  • *Min Height** - sets the minimum height of an element in px, %, em, vh, and vw.
    • Height** - sets the height of an element in px, %, em, vh, and vw.
  • *Max Height** - sets the maximum height of an element in px, %, em, vh, and vw.

Border Style

Set the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.

Border Width

Set the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.

Border Color

Color to use from your application's color palette. Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom, use the Color-picker, or enter your custom color name.

Border Radius

Round the corners of an element's outer border edge in px, %, em, vh, and vw: All sides, Top Left, Top Right, Bottom Left, Bottom Right.

Text Align

Set the horizontal alignment of the text by using the group of predefined buttons:
align to the left
center
align to the right

  • *stretch the lines so that each line has equal width**.

Vertical Align

Set the vertical alignment of an element (inline or inline-block). The available values are: Baseline, Middle, Sub, Super, Top, Bottom, Text-top, Text-bottom.

CSS rule

Add here all the necessary styles.

📘

Using Class CSS on the Components' Styles Panel

If you are interested in the samples of how class CSS can be used on the components' Styles panel, visit this document page.
Also, if you experience issues with prioritizing CSS styles for some UI components please check this section for help.

👍

PROPERTIES Panel View Modes

Note that, in our App Builder, you can make customizing UI components even more comfortable and easily adjustable to different monitors' sizes: now, you can switch the PROPERTIES panel views between 2 Panels, 1 Column or Tabs modes:

👍

Tip!

You can additionally select and manage components by

  1. Using Breadcrumbs
    or
  2. Selecting them on the OUTLINE view menu:

Working with Class Property

Ionic offers the solution that allows specifying different responsive display attributes​. This functionality is also integrated with our platform and is easy to use.

This option will be appreciated by those users who need to publish their Appery.io project both as the web app and mobile app and want to differentiate the app behavior of both versions. Defining such custom behavior for different target devices is simple in the Classes editor: just select the UI component needed and click the Class property button.

For example, you need to hide some UI element (here, it's Content) if the current device is running in the web browser only, select the Content component, then click the Class property button to open the Classes editor and check the aio-web-browser-hide checkbox (available in Appery.io only). Then save:

Similarly, if hiding your page content is required for mobile devices only, check the aio-mobile-hide (available in Appery.io only): the app will show the blank page when run on a mobile.

👍

Class Reference

Applying custom classes allows differentiating the app behavior across different platforms / devices (sizes), etc. You can also use filter to look for the needed class(es).
To get more information about the classes, hover over the ? button:

Also, the Class property is available for specifying component's events with the Set property action:

Working with Properties Popups

Often, editing long text strings for some components' properties is needed. To make it more convenient, many Appery.io UI components support opening popups with big text areas:

1368

Properties of the Input component that allow editing in popups

For example, for editing the Text property of the Button component, click the corresponding button under the PROPERTIES panel, enter the code and save:

Similarly, the popup option is available for editing custom attributes' values:

Also, all the components that offer entering text strings allow editing them inline right in the MOBILE FRAME:

Updated 15 days ago