🚧

Important Note!

This document describes the properties that are specific to particular UI components.
To check for the properties common for most UI components, please check the General components document.

Audio

Audios uploaded via Media Manager only support .mp3, .aac and .wav formats and should not exceed 5 MB. If you need to upload files of other formats and larger sizes, use the Database.

The Audio component has the following properties:

Common Properties

Button

Buttons provide clickable elements used in forms or anywhere where simple, standard button functionality is required.
Being the most popular component, the Button component can be used to navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close popups, invoke a service, or run JavaScript. It may display text, icons, or both.

Ionic Button

If the button's type is set to Ionic Button (default) under the PROPERTIES panel (Common tab), the component will feature the following properties:

Common Properties

Styles Properties

Under the Styles tab, buttons can be styled with several attributes to look like in a specific way:

Ionic Menu Button

Menu Button is a component that automatically creates the icon and functionality to open a menu on a page.
If you define the button Comp. Type property as Ionic Menu Button, the component will have the additional Menu Button properties under its Common tab:

Auto Hide - automatically hides the menu button when the corresponding menu is not active (set to true).
SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.
Menu - an optional property that maps to a Menu's menuId property. It can also be start or end for the menu side. It is used to find the correct menu to toggle.
Type - type of the menu button (Submit, Reset, or Button):

If you switch to the Styles tab, you will get access to modifying the component's Class, Margin, Mode, and Button Color properties similar to how it's done for the default Ionic Button.

Ionic Back Button

With the button Comp. Type property set to as Ionic Back Button, the component will have the additional Back Button properties under its Common tab:

Icon - icon name to use for the back button. Click the Default icon button to select an icon, or leave it to default.
SVG Icon - used to select an svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager.
Text - text to display in the back button.
Type - the type of the back button (Submit, Reset, or Button).
Default Href - the URL to navigate back to by default when there is no history:

If you switch to the Styles tab, you will get access to modifying the component's Class, Margin, Mode, and Button Color properties similar to how it's done for the default Ionic Button.

You can also check the Ionic documentation to read more about Button.

Card

The Card component consists of Card Items, containers that can hold any other UI component. The number of Card Items can be changed by adding or cloning them.

Properties

The Card component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, cards can be styled with several attributes to look like in a specific way:

Card ltem

To add a Card Item, click the + button on the Card.
The Card Item component has the following property:

If you define the card's Type property as Card Header, the component will have the additional properties:

Common Properties

Styles Properties

Under the Styles tab, card headers can be styled with several attributes to look like in a specific way:

Card ltem Title

To add a Card Item Title, click the + button on the Card Item or use the Text component from the PALETTE.
The Card Item Title component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, card headers can be styled with several attributes to look like in a specific way:

Please visit Ionic documentation to read more about Card.

Chart

The Chart component offers a variety of chart types and visualization styles that come with extensive configuration options. This flexibility allows for creating the needed chart quickly and easily. The following built-in chart types are available in Appery.io Visual App Builder:
Bar
Bubble
Doughnut
Line
Pie
Polar Area
Radar
Scatter
Mixed

Please check below for different chart types organized in one project:

👍

More details about how to work with the Chart component and its properties can be found in this document.

Common Properties

The Chart component has the following properties that apply to all chart types:

Additionally, the following chart styling property can be found under the Styles section:

📘

The Radar and Polar Area charts also allow defining the following advanced properties:

• Ticks
• Grid Lines
• Point Labels
• Angle Lines

🚧

All Elements properties are global properties for the selected Chart type.

You can also check the links below to learn more about charts:
Chart documentation: https://www.chartjs.org/
Chart samples: https://www.chartjs.org/samples/latest/.

📘

More information about the easing function can be found here:
http://robertpenner.com/easing/;
https://matthewlein.com/tools/ceaser;
https://easings.net/en;
http://sol.gfxile.net/interpolation/.

The Chart component comes with a nested Chart Data component and the X/Y Axes Options components that can be added by clicking the corresponding gear icon within the selected chart.

Chart Data

The Chart Data component properties that are offered for setting heavily depend on what chart type is being defined.

There are also some Chart Data properties that apply to all chart types:

Additionally, the following chart styling properties are groped under the Styles section:

Chart Axes Options

Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is one or more X-axis and one or more Y-axis to map points onto the 2-dimensional canvas. These axes are know ascartesian axes.
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as radial axes.

🚧

The scales in Chart.js > v2.0 are significantly more powerful, but also different than those of v1.0.
Multiple X- & Y-axes are supported. A built-in label auto-skip feature detects would be overlapping ticks and labels and removes every nth label to keep things displaying normally.
Scale titles are supported. New scale types can be extended without writing an entirely new chart type.

Click the corresponding gear icon (X or Y) within the selected chart to add a new Axes Options element:

Then, select it to get access to its properties.

Properties

X/Y Axes Options have the following properties:

🚧

For the linear Axes type Zero Line is 0!

📘

Want to know more?

You can also check this step-by-step tutorial that shows how to create a simple Ionic mobile application with a line chart in Appery.io.

Checkbox

The CheckboxWrapper allows the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a check box will toggle the checked property. They can also be checked programmatically by setting the checked property.

Properties

Every new CheckboxWrapper component is created with two default child components: Checkbox and ItemLabel.

Common Properties

Checkbox

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

Common Properties

Styles Properties

Under the Styles tab, checkboxes can be styled with additional attributes to look like in a specific way:

ItemLabel

The ItemLabel component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Using Checkbox as a Form Control

If included in a Form component, Checkbox becomes a Form Control:

The Name property should be specified (by default, the Name property is defined as the Component name property, so change it if necessary).

🚧

Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.

To set the initial value of the control, use the Initial Value property of the Form Control properties section. The component can have only boolean (true or false) values. If the property is not specified, the initial value will be set to null.

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations.

Visit the Ionic documentation to read more about checkboxes.

DataTable

The DataTable component consists of DataTableCols the number of which can be changed by adding or cloning.

Properties

The DataTable component has the following properties:

DataTableCol

To add a DataTableCol, click the + button on the DataTable.
The DataTableCol component has the following properties:

Datetime

The DatetimeWrapper component is used to present an interface that makes it easy for users to select dates and times.

Every new DatetimeWrapper component is created with a default label and the current time value.

Properties

The DatetimeWrapper component has the following properties and has two child components: Datetime and Label:

Common Properties

Datetime

The Datetime component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, Datetime components can be styled with the following attributes to look like in a specific way:

ItemLabel

The ItemLabel component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Using Datetime as a Form Control

If included in a Form component, Datetime becomes a Form Control:

Note that the property Name should be specified. By default, the Name property is set as the Component name property. Change it to your name if it is necessary.

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations

Visit the Ionic documentation to read more about datetime.

Divider

Item dividers are block elements that can be used to separate items in a list.
They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items.

Properties

The Divider component has the following properties under the Styles tab to be styled to look like in a specific way:

File Picker

The File Picker component allows you to select files.

👍

How To: File Picker

Please check the detailed instructions on how to set up the File Picker component here.

Properties

The File Picker component has the following properties:

Common Properties

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file:

aio-file-picker.myClass {...}.

For example:
aio-file-picker.myClass { border: 2px solid red; }.

Styles provided on the SCSS panel won't work for this component.

File Picker Button

The File Picker Button component has the following properties:

Common Properties

The File Picker Button component has the following property under the Common tab:

Styles Properties

The File Picker Button component also has the following Styles properties:

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file:

aio-file-picker.myClass > ion-button {...}.

Styles provided on the SCSS panel won't work for this component.

File Picker Image

The File Picker Image component has the following properties:

Common Properties

The File Picker Image component has the following property under the Common tab:

Styles Properties

The File Picker Image component has the following Styles properties:

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file as:

aio-file-picker.myClass > img {...}.

Styles provided on the SCSS panel won't work for this component.

File Picker Files Counter

The File Picker Files Counter component has the following properties:

Common Properties

Styles Properties

The File Picker Counter component has the following Styles properties:

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file:

aio-file-picker.myClass > .files-count {...}.

Styles provided on the SCSS panel won't work for this component.

File Picker Files List

The File Picker Files List component has the following properties:

Styles Properties

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file, for example:

• for file list wrapper styles:
  aio-file-picker.myClass > .files-list {...}

• for each file label styles:
  aio-file-picker.myClass > .files-list .file-info {...}.

Styles provided on the SCSS panel won't work for this component.

File Picker Remove File Icon

The File Picker Remove File Icon component has the following properties:

Styles Properties

🚧

Adding Custom Styles

If you need to add custom styles for this component, provide it in a custom SCSS file:

aio-file-picker.myClass .files-list .remove-icon {...}.

Styles provided on the SCSS panel won't work for this component.

Form

Handling user input with forms is the cornerstone of many common applications. Applications use forms to enable users to log in, update a profile, enter sensitive information, or to perform many other data-entry tasks.

The Form component is based on Angular template-driven forms.

Composition

The Form is a container that can include Form Controls like Checkbox, Datetime, Input, Radiogroup, Range, Select, and Toggle).
To create a Form Control, drag & drop a needed component from the components PALETTE and place it inside the Form to see the Form Control section with more control properties added:

🚧

The added component will become a Form Control only when the property Name is specified which defines the control data key.
For example, we have an Input with defined Name = userName and value = Peter. In this case, the control data will be available as the property of the form data object: {userName: 'Peter'}.

Sending data

There are two ways to send form data:

1. Including the special Submit control. The control has to be placed inside the form:

<form>
    <ion-button type="submit">Submit</ion-button>
</form>

2. Using the Form submit action on the EVENTS tab. The control can be placed everywhere on the page.

Actions at the form submitting can be specified in three ways:

1. Using the Form submit event of the form component on the EVENTS tab (for beginners). In this case, a user can choose an action to be executed at the form submitting. For example, such action can be Invoke service (e.g. Login service) with specified mapping on the DATA panel.
2. Using the (ngSubmit) event of the component (for advanced users). In this case, a user has to define a function - handler which will execute submitting from custom code.
3. Using the Action property of the component (for advanced users). In this case, a user has to define the URL where form data will be sent.

Validation

By default, Ionic has its own validation rules for controls included in the form. If you want to use the validity of the form in general, specify the property Form ID.
The word passed as the value of the property can be used as a variable containing information about the form. Such usage is described in the PROPERTIES section:
The Form ID property can be used as the variable containing the Form state (e.g. formID.valid and formID.value). To use it in custom code, add 'this.' prefix.

👍

Validation Component

To define validation for the UI components that do not become the Validation property when included in the Form or are difficult to combine for validation purposes the Validation component can be used.

Form and Controls have different states when Ionic validation is used.

For example, check using the invalid input state to show an error message: <ion-text *ngIf="user.invalid" color="danger">Incorrect user name</ion-text>. In this case, user is a Control ID defined for the Input component.
If you need to use validation to specific errors, use the errors state with specifying the type of validation error.

Let's seeto define validation for the UI components that do not become the Validation property when included in the Form component. how different error messages at the Input component validation are displayed.
Define the Control ID property of the Input with the passControl value and set its validation (to required and pattern="[0-9]*", for example).
Add two components containing error messages and add the *ngIf directive as an advanced property with the value that is a condition for displaying the error component. The directive is used to show/hide components depending on a directive boolean value.

If the component is valid, the expression passControl.errors will return null (equal to false).
If the component is invalid, the expression passControl.errors will return the object containing all validation errors available by their names. The existence of a necessary error name in the returned errors object is used for the condition of displaying the error message.

<form #myForm="ngForm">
    <ion-input required pattern="[0-9]*" #passControl="ngModel" [ngModel] name="pass"></ion-input>
    <ion-text *ngIf="passControl.errors && passControl.errors.required" color="danger">Value has to be entered</ion-text>
    <ion-text *ngIf="passControl.errors && passControl.errors.pattern" color="danger">Value should contain only numbers</ion-text>
</form>

📘

Want to know more?

More details with examples about the Validation property can be found [here](https://docs.appery.io/docs/ionic-5-property-validati

Properties

Common Properties

🚧

In the initial state of the component, the default HTML <form> features (Action, Target, etc.) are not supported because they are replaced with Angular functionality. To disable Angular functionality and enable default HTML behavior of the component, enable the Native validation property.

The Form ID property can be used in a template or code as a variable containing information about the form:

formID = {
    value: boolean,   // Reports the value of the form
    valid: boolean,   // Reports whether the form is valid. A form is considered valid if no validation errors exist with the current value
    invalid: boolean, // Reports whether the form is invalid, meaning that an error exists in the value
    dirty: boolean    // Reports whether the form is dirty, meaning that the user has changed the value in the UI
  }

In templates, the Form ID property is used as a variable. It can be also passed as a function argument:

<ion-button disabled={{formID.invalid}} type="submit">Submit</ion-button>
  <ion-button (click)="send(formID)">Send</ion-button>

To be used in custom code, the variable is available as this.<Form ID>:

if (this.formID.valid) this.submit();

Google Map

The Google Map component allows you to embed Google Maps into your app.

📘

Google Maps web browser API key is required for the component to work properly. Set the Google API Key on the App Settings page of your app.

Properties

The Google Map component has the following Common properties:

📘

Note

Use the agm-map prefix to increase the priority of your custom classes.

Example: agm-map.map {.....}

Visit the Angular+ Google Map Documentation to read more about Angular+ Google Map.
Visit the Google Map JS API Documentation to read more about Google Map JS API.

📘

Want to know more?

You can also check this document on the Google Map component sample app demonstrating how to use this component in an Ionic app.

Read more about the Google Map properties here.

📘

You might also like this Appery.io Community video that shows how to create an Ionic application for choosing the best place for a party (using the voting functionality) by using the Google Map component:

Marker

By default, the Google Map component has one Marker.
To add another marker to the map, click the + button on the Marker icon:

The Marker component has the following properties:

📘

Info Window displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a mark on the map.

More details about Google Map Marker directives can be found here.

Google Map Window

Set Add Info Window to True for the Marker component to add a new Google Map Window:

The Google Map Window component has the following properties:

🚧

Setting the addInfoWindow property to False will remove the Google Map Window from the Marker (IonicGoogleMapMarkerBean region).

Here is more information about Google Map Window properties.

You might also like our Appery.io Community video that shows how to use the Google Maps component to get current geolocation with Appery.io Geo Service plug-in:

Grid

The Grid component is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — Grid, Row(s) and Cell(s). Cells will expand to fill the row and will resize to fit additional cells. It is based on a 12-cell layout with different breakpoints based on the screen size. The number of cells can be customized by using CSS.

📘

Grid Video Tutorial

You can check this Appery.io YouTube Education Guide video to learn how to arrange components on the screen using the Grid component:

Properties

Grid has the following properties:

Common Properties

Visit the Ionic documentation to read more about Grids.

📘

Note!

When working with the Grid component, pay attention to the Breadcrumbs above the phone frame.

Grid Row

To add a Grid Row, click the + button on the Grid. By default, a new row with two Grid Cells will be created.

Under the Styles tab, Grid Row components have the additional styling properties:

Here is more information about a Grid Row.

Grid Cell

Click the + button on the selected Grid Row to add a new Grid Cell.
Under the Styles tab, Grid Cell components have the additional styling properties:

📘

Specific properties are used to set values based on screen sizes (e.g. Pull Sm means that the property Pull will be applied if screen sizes are Sm and larger).

Screen sizes:
xs - 0px;
sm - 576px;
md - 768px;
lg - 992px;
xl - 1200px.

Here is more information about Grid Cell.

📘

You can check this tutorial to learn how the Grid component can be used in Appery.io.

Html

The HTML component allows inserting custom tags.

Properties

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

Common Properties

📘

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:

Icon

Ionicons is a completely open-source icon set with 700+ icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions. When used with Ionic, the <ion-icon> component will automatically use the correct version based on your platform. Additionally, when used outside of Ionic, both iOS and MD platforms can be chosen by the application.

Properties

The Icon component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, icons can be styled with several attributes to look like in a specific way:

Visit the Ionic documentation to learn more about Icons.

Image

Image is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses Intersection Observer internally, which is supported in most modern browsers, but falls back to a set timeout when it is not supported.

👍

Image Video Tutorial

You can check this Appery.io YouTube Education Guide video to learn how to add images to your application:

Properties

The Image component has the following properties:

Common Properties

📘

The properties Responsive and Shape are not available when Ionic Image is set to True or Wrapper is Avatar or Thumbnail.

Visit the Ionic documentation to read more about images.

Input

The InputWrapper component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input does and works great on desktop devices and integrates with the mobile devices' keyboards.

Properties

Every new InputWrapper component is created with two default child components: Input and ItemLabel.

Common Properties

Input

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

Common Properties

Styles Properties

Under the Styles tab, inputs can be styled with an additional attribute to look like in a specific way:

ItemLabel

The ItemLabel component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Using Input as a Form Control

Input becomes a Form Control if it is included in a Form component and has the specified Name property. By default, the Name property is set as the Component name property but can be changed:

📘

Use the following description only when the Form component has the disabled Native Validation property. With the Native Validation property enabled, the control can be used as a default HTML Form Control.

To set the control initial value, use the Initial Value property of the Form Control properties section. The component can have only string values or null. If the property isn't specified, the initial value will be null.
When used as a Form Control, the Input component has the Function property that allows adding your custom function for validation. Also, it supports the functions created under the CODE panel:

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations

Visit the Ionic documentation to read more about inputs.

Link

The Link component is used for navigating to a specified link. The component is based on Angular routing.

📘

To enable using the Link component, the project routes should be specified. They can be defined in the Project settings under the Routing tab. The specified router names will be displayed in the dropdown list of the Route Name property.

Properties

By default, the Link component has the following properties:

Common Properties

🚧

Using tags can be changed with the Container property. Only Ionic components (beginning with ion- prefix) names can be used if the Ionic mode is chosen.
For example, ion-text allows using such Ionic features as Color, Mode or Router Direction.

The list of displayed properties can be expanded by choosing another Preset mode:
Ionic:

The Custom Preset Mode properties are the following:

Styles Properties

Under the Styles tab, links can be styled with several attributes to look like in a specific way:

List

By default, any new List component contains two List Items. To add a new List Item, click the + button inside the List.

Properties

The List component has the following properties:

Common Properties

Under the Styles tab, lists can be styled with several attributes to look like in a specific way:

Visit the Ionic documentation to read more about lists.

📘

You can check this tutorial to learn how to build an Appery.io mobile app that displays a list of data from a cloud database.

List Item

The List Item component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, inputs can be styled with several attributes to look like in a specific way:

📘

The property's Detail defaults are set to false unless the Mode is iOS and an Href, onclick or Button property is present.

The property Type is only used when an onclick or Button property is present.

The property Sliding State is used only in the Visual Editor to switch a state of Item Sliding. Use a doubleclick on the item Sliding to do the same action.

Navigation with Routing has a higher priority than Href.

Item Label

The Item Label component has the following properties:

Styles Properties

Under the Styles tab, item labels can be styled with several attributes to look like in a specific way:

In the following example, a list has three list items with their item labels having different Position values (Fixed, Stacked, and Floating respectively). Also, switch to their Common tabs to set their Text properties to the corresponding values:

Then, add per one Input to every ListItem and set their Item Wrapped property to False:

Check out how the components with different positions behave in the app:

Item Options

Set the List Item component's Item Type property to Item Sliding to open Item Options:

The Item Options component offers selecting from three Sliding Side values: Start, End or Both.

Adding Item Options

Click the + button on the Item Options to add a new Item Option:

Use double-clicking on the element to hide/show options.
The Item Option component has the following common properties:

Additionally, the following Item Option styling properties are grouped under the Styles tab:

📘

If you are interested in the detailed video tutorial that shows how to create a List - Details mobile application, please check this Appery.io Community link.

RadioGroup

The RadioGroup is a group of wrapped radiobuttons and their labels. It allows a user to select at most one radiobutton from a set. Checking one Radiobutton that belongs to a radio group unchecks any previously checked radiobutton within the same group.

The RadioGroup component is based on Ionic ion-radio-group.

The RadioGroup is a container including three default RadiobuttonWrapper components which, in their turn, include ItemLabel and Radiobutton components. By default, the RadiobuttonWrapper has 3 ItemLabels and 3 Radiobuttons. Note that all Radiobuttons should have different value properties for correct work inside a RadioGroup.

You can add a header to your RadioGroup by setting the property Group Header to True.
To change the direction of radiobuttons, use the Buttons direction property. The Horizontal direction is set by adding a CSS class of the flexbox styles.

🚧

A header can not be added when the Horizontal direction is used.

If you use the RadioGroup as a Form Control, the properties Name and [(ngModel)] should be defined. In this case, the Name property defines a key name of form data, and the [(ngModel)] property defines the name of the variable containing sent data.

For dynamic value changing, use [(ngModel)] instead of the Value property. In this case, a variable name containing changing value data as the value of the [(ngModel)] property should be passed.

Properties

The RadioGroup component has the following properties:

Common Properties

For dynamic changing value use [(ngModel)] instead of the Value property.

If you define the radio group Group Header property as True, the Radio Group Header component will become accessible having the additional common and styling properties under its Common and Styles tabs respectively:

Header Text - the header text shown.
Header Color - select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
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.

RadiobuttonWrapper

Properties

Every new RadiobuttonWrapper component is created with two default child components: Radiobutton and ItemLabel.

Common Properties

Radiobutton

Radiobuttons are used as a set of related options inside of a group. Pressing on a radiobutton will check it.

Pressing a radiobutton will check it and uncheck the previously selected radiobutton, if there is one.

Properties

The Radiobutton component has the following Common properties:

To make the Radiobutton checked, the Value property of the Radiobutton should be the same as the one of the RadioGroup:

📘

Using the following properties makes Radiobutton to a List Item:

• Label Text is not empty;
• Item Wrapper Color or Lines are set;
• Reorder Type is Content or Wrapper.

ItemLabel

The ItemLabel component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Using RadioGroup as a Form Control

RadioGroup becomes the Form Control if it is included in a Form component and has the Name property specified. In this mode, the component has additional properties (Initial Value, Control ID, Control options, and Validation that allow checking the validity, changing updating strategy, etc. These properties can be used only in the Form component that doesn't have the Native validation property enabled:

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.
You can read more about validation in the Form section.

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations.

Visit the Ionic documentation to read more about radiobuttons.

Range

The RangeWrapper slider lets users select from a range of values by moving the slider knob. It can accept dual knobs, but by default, one knob controls the value of the range.

The component is based on Ionic ion-range.

Properties

Every new RangeWrapper component is created with two default child Range components which, in their turn, include two ItemLabels (Start and End).

Common Properties

Range

The Range component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, Range components can be styled with several attributes to look like in a specific way:

ItemLabel

The ItemLabel components have the following properties:

Common Properties

Styles Properties

Under the Styles tab, ItemLabel components can be styled with the following attributes to look like in a specific way:

Using Range as a Form Control

If included in a Form component, Range becomes a Form Control; the Name property should be specified (by default, the Name property is defined as the Component name property, so change it if necessary):

🚧

Note!

Use the following description only when the Form component has the disabled Native validation property. If the Native validation property is enabled the control can be used as a default HTML Form Control.

To set the initial value of the control, use the Initial Value property of the Form Control properties section.

The component can have a number value (e.g. 20) or an object value if the Dual Knobs property is True (e.g. { lower: 20, upper: 80 }). If the property isn't specified the initial value will be set to null.

To use variables as the control's data, the advanced property [(ngModel)] should be specified - the variable name should be entered as the property value. It replaces the value that is set by the Initial Value property.

The component can get additional properties (Control ID and Control options) that allow checking the validity, changing updating strategy, etc. These properties can be used if the Native Validation property is disabled for the Form component.
Read more about validation in the Form section.

🚧

Note!

The component can't be used with array iteration data for creating a dynamic form structure. If you need to create such kind of structure, follow these recommendations

Reorder

Reorder is a component that allows an item in a group of items to be dragged to change its order within that group and is based on the Ionic ion-reorder.
Reorder components are generally used as a set of related options inside of a group, the ReorderGroup.

👍

How To: Reorder

Please check the detailed instructions on how to set up the Reorder component here.

Properties

The Reorder component has the following properties:

📘

Want to know more?

We also have the app template introducing all Ionic UI components.
If interested, please check out this section where you can find detailed step-by-step instructions that will walk you through the process of creating a ReorderGroup page in an Ionic project

An Ionic ion-reorder-group can be used to group a set of Reorder components.

ReorderGroup

The ReorderGroup is a group of Reorder components. It allows a user to select at most one Reorder component from a set. Checking one Reorder component that belongs to a reorder group unchecks any previously checked Reorder component within the same group.

ReorderGroup is a wrapper component for items using the ion-reorder component and is based on the Ionic ion-reorder-group.

The component has the following Common property:

Search

Searchbars represent text fields that can be used to search through a collection. They can be displayed inside a toolbar or the main content.

Search should be used instead of an Input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon clicking.

Properties

The Search component has the following properties:

Common Properties

Styles Properties

Under the Styles tab, searchbars can be styled with several attributes to look like in a specific way:

Visit the Ionic documentation to read more about searchbars.

Select

Selects are Form Controls used to select an option (or options) from a set of options, similar to a native ion-select element. When the select is tapped, a dialog appears with all of the options in a large, easy-to-select list.
A select should be used with child ion-select-option elements. If the child option is not given a value attribute, then its text will be used as the value.
If the value is set on the ion-select, the selected option will be chosen based on that value. Otherwise, the selected attribute can be used on the ion-select-option.

📘

Basics about working with the Select component

You can find more information on how to work with Select here.

Properties

Every new SelectWrapper component is created with two default child components: Select and ItemLabel.

The Select Item Wrapper (ion-item) component has the following properties:

Common Properties

Adding Select

Click the + button on the SelectWrapper to add a new Select:

The Select component has the following properties:

Common Properties

📘

The property Opened is used only in the Visual Editor for switching between the opened and closed states of the Select component.

Visit the Ionic documentation to read more about <ion-select>.

Styles Properties

Under the Styles tab, selects can be styled with this additional attribute to look like in a specific way:

👍

Note!

To get access to the advanced properties organized in the Form Control section, make sure the Select is used as a Form Control (placed inside the Form component) and is selected:

Adding Select Option

Click the + button on the Select to add a new Select Option:

Use double-clicking on the select to show options:

The Select Option (ion-select-option) component has the following additional property:

📘

Note!

To make the Select Option checked, the Value property of the Select Option should be the same as the one of the Select component:

📘

Note!

To get multiselect for the Select component, provide the needed values inside the [] for the Value property:

ItemLabel

The ItemLabel component has the following properties: