---
updatedAt: 2025-07-15T08:32:47.000Z
agentTools:
  projectIndex: https://docs.appery.io/llms.txt
---

# 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 ](https://docs.appery.io/docs/ionic-5-ui-components-properties) 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:

<Image align="center" className="border" width="50% " border={true} src="https://files.readme.io/238af90-small-2023-05-14_16-11-42.png" />

All the UI components available in the Visual **[App Builder](https://appery.io/appbuilder)** feature further subdivision into common properties and properties related to the component's styling.\
Common properties are grouped under the component's **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** **Common** tab while the properties used to define styling can be found under the **Styles** tab:

<Image align="center" className="border" width="50% " border={true} src="https://files.readme.io/c21cff3-small-2023-05-14_14-54-22.png" />

The general **Common** properties belonging to most UI components available in the Visual **[App Builder](https://appery.io/appbuilder)** include:

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        Property Name
      </th>

      <th>
        Property Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        Comp. Name
      </td>

      <td>
        The mandatory property used for identifying the component. When you drag and drop the component from the components **PALETTE** the Appery.io **[Visual Builder](https://appery.io/appbuilder)** 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.
      </td>
    </tr>

    <tr>
      <td>
        [Visible](https://docs.appery.io/docs/ionic-5-property-visible)
      </td>

      <td>
        Set to ***True*** to determine that the component is visible on the page.\
        For more details, read [here](https://docs.appery.io/docs/ionic-5-property-visible).
      </td>
    </tr>

    <tr>
      <td>
        [Disabled](https://docs.appery.io/docs/ionic-5-property-disabled)
      </td>

      <td>
        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](https://docs.appery.io/docs/ionic-5-property-disabled).
      </td>
    </tr>

    <tr>
      <td>
        Text
      </td>

      <td>
        The item text. 
      </td>
    </tr>

    <tr>
      <td>
        Text I18n
      </td>

      <td>
        If set to ***true*** then use the **Text** property for internationalization.
      </td>
    </tr>

    <tr>
      <td>
        Text in Editor
      </td>

      <td>
        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](https://youtu.be/tCKjJo7x1fY).
      </td>
    </tr>

    <tr>
      <td>
        Slot
      </td>

      <td>
        Position inside another component. It can be set to ***Fixed***.\
        Some components can have different settings: ***Start*** or ***End***.
      </td>
    </tr>
  </tbody>
</Table>

The general **Styles** properties belonging to most UI components available in the Visual **[App Builder](https://appery.io/appbuilder)** include:

<Table align={["left","left"]}>
  <thead>
    <tr>
      <th>
        Property Name
      </th>

      <th>
        Property Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        [Class](https://docs.appery.io/docs/ionic-5-ui-components-properties#working-with-class-property)
      </td>

      <td>
        The **[Class](https://docs.appery.io/docs/ionic-5-ui-components-properties#working-with-class-property)** property allows listing different classes.\
        Check [this](https://ionicframework.com/docs/layout/css-utilities) link for Ionic CSS utility classes.
      </td>
    </tr>

    <tr>
      <td>
        Mode
      </td>

      <td>
        Determine which platform styles to use. Possible values are ***iOS*** or ***MD***.
      </td>
    </tr>

    <tr>
      <td>
        Margin
      </td>

      <td>
        Set the margin area of an element in `px`, `%`, `em`, `vh`, and `vw`: **All sides**, **Top**, **Right**, **Bottom**, **Left**.
      </td>
    </tr>

    <tr>
      <td>
        Padding
      </td>

      <td>
        Set the card padding area in `px`, `%`, `em`, `vh`, and `vw`:  

        * \*All side&#x73;**,**&#x54;o&#x70;**,**&#x52;igh&#x74;**,**&#x42;otto&#x6D;**,**&#x4C;eft\*\*.
      </td>
    </tr>

    <tr>
      <td>
        Opacity
      </td>

      <td>
        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`.
      </td>
    </tr>

    <tr>
      <td>
        Bg Color
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        Display
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        Position
      </td>

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

        * \*Typ&#x65;**- sets how an element is positioned in a document:***Static***,***Relative***,***Fixed***,***Absolute***, or***Sticky***.\
          Set the chart position in `px`, `%`, `em`, `vh`, and `vw`: **&#x54;o&#x70;**,**&#x52;igh&#x74;**,**&#x42;otto&#x6D;**,**&#x4C;eft\*\*.
      </td>
    </tr>

    <tr>
      <td>
        Color
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        Width/Height
      </td>

      <td>
        * \*Min Width\*\* - sets the minimum width of an element in `px`, `%`, `em`, `vh`, and `vw`.  
        * * Widt&#x68;**- sets the width of an element in`px`, `%`, `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`.
      </td>
    </tr>

    <tr>
      <td>
        Border Style
      </td>

      <td>
        Set the line style of an element's border.\
        Available values are: ***Solid***, ***Dotted***, ***Dashed***, and ***Double***.
      </td>
    </tr>

    <tr>
      <td>
        Border Width
      </td>

      <td>
        Set the line width of an element's border in `px`, `em`, `vh`, and `vw`: **All sides**, **Top**, **Right**, **Bottom**, **Left**.
      </td>
    </tr>

    <tr>
      <td>
        Border Color
      </td>

      <td>
        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.
      </td>
    </tr>

    <tr>
      <td>
        Border Radius
      </td>

      <td>
        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**.
      </td>
    </tr>

    <tr>
      <td>
        Text Align
      </td>

      <td>
        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*\*\*.
      </td>
    </tr>

    <tr>
      <td>
        Vertical Align
      </td>

      <td>
        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***.
      </td>
    </tr>

    <tr>
      <td>
        CSS rule
      </td>

      <td>
        Add here all the necessary styles.
      </td>
    </tr>
  </tbody>
</Table>

> 📘 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](https://docs.appery.io/docs/applying-user-styles) document page.\
> Also, if you experience issues with prioritizing CSS styles for some UI components please check [this](https://docs.appery.io/docs/applying-user-styles#applying-additional-selectors-for-prioritizing) section for help.

> 👍 *PROPERTIES* Panel View Modes
>
> Note that, in our **[App Builder](https://docs.appery.io/docs/apperyio-visual-builder)**, you can make customizing  UI components even more comfortable and easily adjustable to different monitors' sizes: now, you can switch the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel views between ***2 Panels***, ***1 Column*** or ***Tabs*** modes:

<Image align="center" className="border" width="50% " border={true} src="https://files.readme.io/d07c017-small-2023-05-14_15-38-21.png" />

> 👍 Tip!
>
> You can additionally select and manage components by
>
> 1. Using **Breadcrumbs**\
>    or
> 2. Selecting them on the **[OUTLINE](https://docs.appery.io/docs/1-creating-an-app-ui-palette#outline-view)** view menu:

<Image align="center" className="border" border={true} src="https://files.readme.io/d6bfe60-2023-01-24_15-33-04.png" />

## Working with *Class* Property

Ionic offers the [solution](https://ionicframework.com/docs/layout/css-utilities#responsive-display-attributes) 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](https://docs.appery.io/docs/2-creating-an-app-ui-pages-and-tabs#content-component)**) if the current device is running in the web browser only, select the **[Content](https://docs.appery.io/docs/2-creating-an-app-ui-pages-and-tabs#content-component)** component, then click the **Class** property button to open the **Classes** editor and check the **aio-web-browser-hide** checkbox (available in [Appery.io](https://appery.io/) only). Then save:

<Image align="center" className="border" border={true} src="https://files.readme.io/30e76bf-2022-11-23_11-20-33.png" />

Similarly, if hiding your page content is required for mobile devices only, check the **aio-mobile-hide** (available in [Appery.io](https://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:

<Image align="center" className="border" border={true} src="https://files.readme.io/dca78b6-2022-11-23_12-14-15.png" />

Also, the **Class** property is available for specifying component's events with the ***[Set property](https://docs.appery.io/docs/5-event-handling#set-property)*** action:

<Image align="center" className="border" border={true} src="https://files.readme.io/a7604a6-2023-01-24_15-34-25.png" />

## 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](https://docs.appery.io/docs/ionic-5-ui-components-properties) support opening popups with big text areas:

<Image title="2023-01-24_15-47-18.png" alt={1368} align="center" border={true} src="https://files.readme.io/8945f45-2023-01-24_15-47-18.png">
  Properties of the **Input** component that allow editing in popups
</Image>

For example, for editing the **Text** property of the **[Button](https://docs.appery.io/docs/ionic-5-ui-components-properties#button)** component, click the corresponding button under the **[PROPERTIES](https://docs.appery.io/docs/1-creating-an-app-ui-palette#properties-overview)** panel, enter the code and save:

<Image align="center" className="border" border={true} src="https://files.readme.io/239a83f-2023-01-24_15-50-57.png" />

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

<Image align="center" className="border" border={true} src="https://files.readme.io/6bcce19-2023-01-24_15-54-38.png" />

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

<Image align="center" className="border" border={true} src="https://files.readme.io/6083430-2023-01-24_15-36-37.png" />