Ionic UI Components Properties

This section provides an overview of the Ionic UI components and their properties available in the visual App Builder PALETTE

Introduction

When you build an app in Appery.io, you create pages (called Screens) that contain predefined UI components such as buttons, inputs, check boxes, lists, etc.
Every new Ionic app comes with this default set of UI components that are ready for use (core components). All of the available core UI components can be accessed from the PALETTE panel:

636

Currently, the following core UI components grouped under the PROPERTIES CORE COMPONENTS folder are available:

πŸ‘

Custom UI Components

Note that you are not limited to using core UI components only. If needed, a set of custom components can be created.
More information about how to work with custom components is here.

1596

Each component, as well as the page itself, contains properties that can be changed:

1594

Properties of the Button component

πŸ‘

Common / Styles Properties

Some UI components offer subdivision into common properties and properties related to the particular components' styling. They can be found under PROPERTIES > Common/ Styles tabs respectively.

PROPERTIES Overview

Every component has a set of properties some of which are common, others are specific to particular components. All properties that are available for a particular component can be accessed from the PROPERTIES view on the right of the working area.

πŸ‘

Try our Ionic 5 Custom UI Components App Template

We highly recommend that you check out our ready-to-go Ionic Custom UI Components App Template where you can find all Ionic UI components currently presented by Appery.io.
With this template, you will be able to review them in detail and try customizing any UI component according to your needs.

And even more: you can now enjoy the one-click-away option of installing the template app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it!

Create in Appery.io

Here is the description of the properties that can be defined for PALETTE components.
To check for the properties of a particular UI component, please see the documentation for the corresponding component; for example, the details of the Chart component can be found here.

πŸ“˜

Most properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it.

General Components Properties

Every Appery.io UI component has its own properties: some are common, others are specific to a particular component.
General properties belonging to most components available in the Visual App Builder include:

Property NameProperty Description
Component NameThe 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.
Component TypeUse this property to change the button role for interaction with Menu (Ionic Menu Button) or Routing (Ionic Back Button):
Ionic Button
Ionic Menu Button
Ionic Back Button.
Navigation with Routing has higher priority than Href.
ClassThis property is found under the Styles tab and allows listing different classes.
Check this link for Ionic CSS utility classes.
VisibleSet to True to determine that the component is visible on the page.
For more details, read here.
DisabledEvery 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.
ColorColor to use from your application's color palette.
Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
SlotPosition inside another component. It can be set to Fixed.
Some components can have different settings: Start or End.
ModeDetermine which platform styles to use. Possible values are iOS or MD.
Attribute nameA new attribute value.

Additionally, some 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:

321

πŸ‘

You can additionally select and manage components by

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

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 very 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 as the 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 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:

1434

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:

1267

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

1370

Working with Properties Popups

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

1370

Properties of the Select component (when used as the Form control) that allow editing in popups

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

1089

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

1094

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:

326

Common Properties

Property NameProperty Description
TextButton text.
Text InternationalizationIf set to True then use the Text property for internationalization.
Button TypeClick to select between Button (default) or Bar Button.
IconMake a button look like an icon. This property converts the button to an icon by changing its Style property and ignoring the Text property.
Style - click No icon to change the icon style by selecting a needed icon.
Name allows changing Ionic 5 icon style dynamically by property binding to [name].
Color - the color to use from your application's color palette. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Slot - position inside the button: Icon only, Start, End.
Custom 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.
RoutingRoute Name - define the list of routes names from the Routing panel.
Route Params - the field used to add values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction (back, forward or root) when navigating to another page using href.
Link FeaturesOptions for the component to be used as a link:
Href - this property contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Type of the Button: Submit, Reset, Button.
Target - specify where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top
Rel - specify the relationship of the target object to the link object.
(click)Action to be triggered on button click.

Styles Properties

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

Property NameProperty Description
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Button ColorSelect button color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
ExpandSet to Block for a full-width button or to Full for a full-width button without left and right borders.
FillSet to Solid or select Clear for a transparent button, or Outline for a transparent button with a border.
ShapeSetting to Round makes the button rounded.
SizeSelect the preferred button size: Small, Defaultor Large.
StrongIf set to True, activates a button with a heavier font weight.
Text ColorSelect button text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect border color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
WidthSet the width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
HeightSet the height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The property Download has been removed from under the Link Features additional menu.
Also, the Mode property has been removed from the Icon section.

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 Component 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).
Custom 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):

324

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:

325

Ionic Back Button

With the button Component 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.
Custom 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:

326

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:

324

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

Property NameProperty Description
ButtonIf set to True, a button tag will be rendered and the card will become tappable.
RoutingRoute Name - define the list of routes names from the Routing panel.
Route Params field is to add values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction when navigating to another page using Href.
Navigation with Routing has higher priority than Href.
Link Features
(options for the component used as a link)
Download- instruct browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name.
Href - this property contain a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Rel - specifies the relationship of the target object to the link object.
Target - specify where to display the linked URL. Only applies when an Href is provided: Blank, Self, Parent, or Top.
Type of the Button: Submit, Reset, Button.

Styles Properties

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

Property NameProperty Description
Card ColorSelect the color of the card from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Text ColorSelect the card text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the card margin area in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
PaddingSet the card padding area in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of card's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of card's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS border color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound the corners of card's outer border edge in px, %, em, vh, and vw: All sides, Top Left, Top Right, Bottom Left, Bottom Right.
DisplaySet the card display behavior (the type of rendering box) 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 effect.
Text AlignSet the horizontal alignment of the card text.
align left - aligns the text to the left
center - centers the text.
align right - aligns the text to the right.
justify - stretches the lines so that each line has equal width
Vertical AlignSet the card vertical alignment (inline or inline-block). The available values are: Baseline, Middle, Sub, Super, Top, Bottom, Text-top, Text-bottom.
HeightSet card's height in px, %, em, vh, and vw.
WidthSet card's width in px, %, em, vh, and vw.
PositionThe position Type available values are: Static, Relative, Fixed, Absolute, and Sticky*.
Set the card position in px, %, em, vh, and vw:
Top, Right, Bottom, Left**.
OpacitySet the card opacity. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The property Download has been removed from under the Link Features additional menu.

Card ltem

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

Property NameProperty Description
TextCard item text.
Visible if the card item has no child elements.
Text InternationalizationIf set to True then use the Text property for internationalization.
TypeClick to select card content type: Card content or Card header.

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

Common Properties

Property NameProperty Description
TranslucentIf set to true, the card header will be translucent. For iOS mode only.

Styles Properties

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

Property NameProperty Description
Card Item ColorSet the CSS color of the card item selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Text ColorSet the CSS color of the card header text selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.

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

Property NameProperty Description
TypeClick to select the card title type: Card Title or Card Subtitle.
Title TextContent title text. Visible if Title has no child elements.
Title Text InternationalizationIf set to True then use the Title Text property for internationalization.

Styles Properties

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

Property NameProperty Description
Card Title ColorSet the CSS color of the card title selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.

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:

455

πŸ‘

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

Common Chart Component Properties

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

Property NameProperty Description
Auto init ChartIf set to true, the Chart component is automatically initiated.
ClassAdd CSS classes for chart wrapper (class will not modify the chart canvas).
LabelsThe array of labels to display. To specify it, switch to the CODE tab, add a variable, ex. label of Any type and provide the value(s) to be displayed in the chart: For example: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'] (for simple labels) or [ ['Label 1', 'value: 3'], 'Label 2', 'Label 3', 'Label 4', ['Label 5', 'Value: 5'] ] (for multilabels). Now, the Labels property can be defined with the label value.
TypeSelect the type of chart to be created:
line (default), bar, horizontal bar, radar, pie, doughnut, polarArea, bubble, scatter,mixed.
ResponsiveResize the chart canvas when its container does.
Responsive Animation DurationDuration in milliseconds it takes to animate to new size after a resize event.
Maintain Aspect RatioMaintain the original canvas aspect ratio (width / height) when resizing.
Aspect RatioCanvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
Show Advanced PropertiesIf set to true, the advanced chart properties can be accessed:
- All - all the advanced properties are available.
- Animation - animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes:
duration - the number of milliseconds the animation takes
easing - the easing function to be used.
Possible values are linear,easInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
- Legend - displays data about the datasets on the chart:
Align - alignment of the legend (start, center (default for unrecognized values), or end)
Display - set to true to display the legend
Labels Box Width - the width of the colored box
Labels Font Color - the text color.
Labels Font Size - the text font size
Labels Font Style - the text font style
Labels Use Point Style - the label style will match corresponding point style (size is based on the minimum value between Box Width and Font Size)
Position - the legend position (top, left, bottom, right)
Reverse - the legend will show datasets in reverse order
Rtl - set to true to render the legends from right to left.
- Title - defines text to draw at the top of the chart:
Display - set to true to display the title
Font Color - the font color.
Font Size - the font size
Font Style - the font style
Line Height - the height of an individual line of text
Padding - the number of pixels to add above and below the title text
Position - the title position (top, left, bottom, right)
Text - the title text to display. If specified as an array, text is rendered on multiple lines.
- Tooltips:
Background Color - the tooltip background color.
Body Align - the horizontal alignment of the body text lines. The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported: left (default), right, center. These options are only applied to text lines. Color boxes are always aligned to the left edge.
Body Font Color
Body Font Size
Body Font Style
Body Spacing - the spacing to add to top and bottom of each tooltip item
Border Color
Border Width - the border size
Caret Padding - extra distance to move the end of the tooltip arrow away from the tooltip point
Caret Size - size, in px, of the tooltip arrow
Corner Radius - the radius of the tooltip corner curves
Display - if set to true (default), the tooltips are enabled on canvas
Display Colors - if set to true, color boxes are shown in the tooltip
Intersect - if set to true, the tooltip mode applies only when the mouse position intersects with an element. If set to false, the mode will be applied at all times
Mode - sets which elements appear in the tooltip. When configuring interaction with the graph via hover or tooltips, a number of different modes are available. The modes and how they behave in conjunction with the intersect setting are detailed below:
point finds all of the items that intersect the point.
nearest gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the axis setting to define which directions are used in distance calculation. If intersect is set to true, it is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
index finds item at the same index. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect is set to false the nearest item in the X direction is used to determine the index. To use index mode in a chart like the horizontal bar chart, where we search along the Y direction, you can use the axis setting introduced in v2.7.0. Setting this value to y on the Y direction is used.
dataset finds items in the same dataset. If the intersect setting is true, the first intersecting item is used to determine the index in the data. If intersect is set to false, the nearest item is used to determine the index.
X returns all items that would intersect based on the X coordinate of the position only. It would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.
y returns all items that would intersect based on the Y coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
MultiKey Background - the color to draw behind the colored boxes when multiple items are in the tooltip
Position - the mode for positioning the tooltip. Possible modes are:
average will place the tooltip at the average position of the items displayed in the tooltip. nearest will place the tooltip at the position of the element closest to the event position. New modes can be defined by adding functions to the Chart.Tooltip.positioners map.
Rtl - select true for rendering the legends from right to left.
Title Align - the horizontal alignment of the title text lines. The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported: left (default), right, center. These options are only applied to text lines. Color boxes are always aligned to the left edge.
Title Font Color
Title Font Size
Title Font Style
Title Margin Bottom - the margin to add on the bottom of the title section
Title Spacing - the spacing to add to top and bottom of each title line
X Padding - the padding to add on left and right of tooltip
Y Padding - the padding to add on top and bottom of the tooltip.
- Elements - while chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same color but change the fill per dataset. Options can be configured for four different types of elements: line, arc, point, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

πŸ“˜

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 on 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:

Property NameProperty Description
DataThe list of data value(s).
Legend LabelThe label for the dataset which appears in the legend and tooltips.
Not available for Polar Area, Pie and Doughnut chart types.
OrderThe drawing order of dataset. Also affects order for stacking, tooltip, and legend.
Not available for Polar Area, Pie and Doughnut chart types.
Axis IDX Axis ID - the ID of the X-axis to plot this dataset on.
Y Axis ID - the ID of the Y-axis to plot this dataset on.
Not available for Polar Area, Radar, Pie, Doughnut, and Bubble chart types.

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

Property NameProperty Description
FillSelect to choose how area under the line must be filled: start, origin (default), end, don't fill.
Background ColorThe line fill color in the format rgba(0, 0, 0, 0.1).
Cubic Interpolation ModeThe "default" algorithm uses a custom weighted cubic interpolation, which produces pleasant curves for all types of datasets. Two modes are available: default or monotone.
Line TensionBezier curve tension of the line. Set to 0 to draw straight lines. This option is ignored if monotone cubic interpolation is used.
Stepped LineIf the Stepped Line value is set to anything other than false, Line Tension will be ignored:
before, after, middle, default.
Span GapsIf set to False (default), NaN data causes a break in the line.
Show LineIf set to False, the line is not drawn for this dataset.
BorderColor - the line color in the format rgba(0, 0, 0, 0.1).
Dash - length and spacing of dashes (not available for Bubble).
Width - the line width (in pixels).
PointBackground Color - the fill color for points in the format rgba(0, 0, 0, 0.1).
Border Color - the border color for points in the format rgba(0, 0, 0, 0.1).
Border Width - the width of the point border in pixels.
Hit Radius - the pixel size of the non-displayed point that reacts to mouse events.
Hover Background Color - point background color when hovered.
Hover Border Color - point border color when hovered.
Hover Border Width - border width of point when hovered.
Hover Radius - the radius of the point when hovered.
Radius - the radius of the point shape. If set to 0, the point is not rendered.
Rotation - the rotation of the point in degrees.
Style - style of the point: circle, cross, crossRot, dash, line, *rect, rectRounded, rectRot, *star, triangle.

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:

964

Then, select it to get access to its properties.

Properties

X/Y Axes Options have the following properties:

Property NameProperty Description
ScalesDisplay - control the axis global visibility if set to true.
Id - is used to link datasets and scale axes together. The properties dataset.xAxisID or dataset.yAxisID have to match the scale properties scales.xAxes.id/scales.yAxes.id. This is especially needed if multi-axes charts are used.
Labels - the labels list: ['Label 1','Label 2','Label 3','Label 4','Label 5']or ['Label 5','Label 1','Label 2','Label 3','Label 1'].
Position - the position of the axis in the chart. The possible values are:
X Axes: top, bottom
Y Axes: left, right.
Stacked - if set to true, data is stacked.
Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces. Bar charts can be configured into stacked bar charts by changing the settings on the X- and Y-axes to enable stacking.
Type - the type of the scale to be used: linear, logarithmic, or category:
Linear scale is used to chart numerical data. It can be placed on either the X- or Y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the X-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis
Logarithmic scale is used to chart numerical data. It can be placed on either the X- or Y-axis. As the name suggests, logarithmic interpolation is used to determine where a value lies on the axis
Category - if global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only data.labels is defined, this will be used. If data.xLabels is defined and the axis is horizontal, this will be used. Similarly, if data.yLabels is defined and the axis is vertical, this property will be used. Using both xLabels and yLabels together can create a chart that uses strings for both the X- and Y-axes.
Specifying any of the settings above defines the X-axis as the category type if not defined otherwise. For more fine-grained control of category labels it is also possible to add labels as part of the category axis definition. Doing so does not apply the global defaults.
Grid LinesThe grid line configuration is nested under the scale configuration in the gridLines key. It defines options for the grid lines that run perpendicular to the axis.
https://www.chartjs.org/docs/latest/axes/styling.html
Border Dash - the length and spacing of dashes on grid lines.
Color - the grid lines color. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
Display - if set to false, the grid lines for this axis will not be displayed.
Draw Border - if set to true, the border at the edge between the axis and the chart area is drawn.
Draw On Chart Area - if set to true, the lines on the chart area inside the axis lines are drawn. This is useful when there are multiple axes and you need to control which grid lines are drawn.
Draw Ticks - if set to true, the lines beside the ticks in the axis area beside the chart are drawn.
Line Width - the stroke width of grid lines.
Offset Grid Lines - if set to true, the grid lines will be shifted to locate between the labels. This is set to true for the bar chart by default.
Tick Mark Length - the length in px that the grid lines will draw into the axis area.
Z-Index - z-index of the grid line layer. The values <= 0 are drawn under datasets, those that are `> 0 on top.
Zero Line Border Dash - the length and spacing of dashes of the grid line for the first index (index 0).
Zero Line Color - the stroke color of the grid line for the first index (index 0).
Zero Line Width - the grid line stroke width for the first index (index 0).
LabelDisplay - if set to true, displays the axis title.
Font Color - the font color for scale title.
Font Size - the font size for scale title.
Font Style - the font style for the scale title, follows the CSS font-style options (i.e. normal, italic, oblique, initial, inherit).
Label String - the text for the title.
Line Height - the height of an individual line of text.
Padding - the padding to apply around scale labels. Only top and bottom are implemented.
TicksAuto Skip - if set to true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn Auto Skip off to show all labels available.
Auto Skip Padding - the padding between the ticks on the horizontal axis with Auto Skip enabled.
Begin At Zero - if set to true, the scale will include 0 if it is not already included.
Display - controls the axis global visibility (visible when true, hidden when false).
Font Color - the font color for tick labels.
Font Size - the font size for the tick labels.
Font Style - the font style for the tick labels, follows the CSS font-style options.
Label Offset - the distance in px to offset the label from the center point of the tick in the X direction (for the X-axis), and the Y direction (for the Y-axis). Note that this can cause labels at the edges to be cropped by the edge of the canvas.
Line Height - the height of an individual line of text.
Max - the user defined maximum number for the scale, overrides maximum value from data.
Max Rotation - the maximum rotation for tick labels when rotating to condense labels. Rotation doesn't occur until necessary. Only applicable to horizontal scales.
Min - the user defined minimum number for the scale, overrides minimum value from data.
Min Rotation - the minimum rotation for tick labels. Only applicable to horizontal scales.
Mirror- flips tick labels around axis, displaying the labels inside the chart instead of outside. Only applicable to vertical scales.
Padding - the padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
Precision - if defined with the Step Size property unspecified, the step size will be rounded to this many decimal places.
Reverse - reverses the order of tick labels if set to True.
Sample Size - the number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
Step Size - the user defined fixed step size for the scale.
Ticks Max Ticks Limit - the maximum number of ticks and gridlines to show.
Z-index - z-index of the tick layer. It is used when ticks are drawn on chart area. The values <= 0 are drawn under datasets, those > 0 on top.

🚧

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 5 mobile application with a line chart in Appery.io.

Checkbox

Check boxes allow 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.

Using Checkbox as a Form Control

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

1358

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.

Properties

The Checkbox component has the following properties:

Common Properties

Property NameProperty Description
CheckedIf set to true, the check box is selected. The default is set to false.
NameThe name of the control, which is submitted with the form data.
IndeterminateIf set to True, the check box will visually appear as indeterminate. The default is set to false.
ValueUsed as data for forms and groups. The value of the check box does not mean if it is checked or not, use the checked property for that.
[(ngModel)]Angular directive for data binding.
(ionBlur)The event emitted when the toggle loses focus.
(ionChange)The event emitted when the checked property has changed.
(ionFocus)The event emitted when the toggle has focus.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the check box will be wrapped in the ion-item tag.
Color - item wrapper Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Disabled - if set to true, the user cannot interact with the component. Defaults are set to false.
Lines - define how the bottom border should be displayed on the item. Available options are Full, Inset or None.
LabelIf label is used, the input will be wrapped in the <ion-item> tag.
Text - label text.
Position - determine where and how the label behaves inside an item. The possible values are Inline, Fixed, Stacked or Floating.
Color - label Ionic color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Slot - label position in the ion-item tag (Start or End).
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderReorder properties:
Type - if set to Wrapper, the item will be wrapped into a reorder tag.
Icon - custom icon for reorder with a type Content.
Click the Default icon button to select the needed icon.
Custom 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.

Styles Properties

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

Property NameProperty Description
MarginSet the check box margin area in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
Checkbox SizeSet the check box size in px, %, em, vh, and vw.
BackgroundColor - select CSS background color of the check box from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Color Checked - select CSS background color of the check box (when checked) from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
BorderStyle - the check box border style ,
Available values are: Solid, Dotted, Dashed, and Double.
Width - border check box width in px, em, vh, and vw.
Color - select CSS border color of the check box from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Color Checked - select CSS border color of the check box (when checked) from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Radius - border check box radius in px, %, em, vh, and vw.
CheckmarkColor - select CSS checkmark color of the check box from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Width - stroke width of the check box checkmark in px, %, em, vh, and vw.

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:

Property NameProperty Description
Data ModeData source.
Mode: Client Pages, Client Infinite, Server Pages, or Server Infinite.
Service Name - the service to be linked with the datatable to return data. It is created after a datasource is added under the DATA tab.
RowsAn array of rows to display (variable or mapping).
Value type: Array. The default value is set to [].
There are two ways to set the data source for Rows:
Define a variable under the CODE tab with data. Then choose the variable as the value for the property Rows;
Use the DATA tab to map service data to the Rows property.
LimitIs necessary for calculating sizes (rows count) of the page and for pagination.
If not defined, Limit will be calculated as the length of Rows data (one page with all rows data).
CountEnter the number to set the total count of all rows. The default is set to 0.
The property is necessary for correct rows displaying in infinite scroll modes and for calculations for page navigation.
Required if the Data Mode property is set to Server Pages or Server Infinite. If the Data Mode property is set to Client Pagesor Client Infinite, Count will be automaticallycalculated as the length of `Rows data.
OffsetThe current offset ( page - 1 ) is shown.
The property is necessary for calculating the number of the current page. In this case, it will be the Offset property increased by 1.
Should be set if the number of the first page differs from the default,
Selection TypeThe type of row selection. The value types are
Single - one row can be selected at a time;
Cell - one cell can be selected at a time;
Multi - multiple rows can be selected using Ctrl or Shift keys;
MultiClick - multiple rows can be selected by clicking;
Checkbox - multiple rows can be selected using check boxes.
Display CheckCan be used to check whether you want to show the check box for a particular row based on some criteria.
Create a new function under the DATA tab of the Visual Editor and choose the created function for the property.

(row, column, value) => { return row.name !== 'Ethel Price'; }
External SortingTo be used instead of client-side sorting. The default is set to False.
Row HeightIs necessary for calculating the sizes of the page when infinite scrolling is used and it is optional for pagination mode.
The default value is auto for Client Pages / Server Pages and 50 for Client Infinite / Server Infinite.
When infinite scrolling is not used, pass undefined for fluid heights.
If infinite scrolling is used, pass a number to calculate the heights.
Row Height can`t be auto when the Data Modeproperty is set to Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set.
Header HightMinimum header height in pixels.
Header Height can`t be auto when ScrollbarV is True or Data Mode is Client Infinite or Server Infinite or theScrollbarV property is set to True. It is automatically changed to undefined from auto if the properties above are set.
Footer HeightThe minimum footer height in pixels. This property is used for calculating the dimensions of the table size.
Pass false value for no footer.
Table HeightSet the height of a datatable in the percentage of viewport height. It means appending a special CSS class with needed styles. It will be changed to 100 % automatically when the Data Mode property is set to Client Infinite or Server Infinite or the ScrollbarV property is defined as True.
- 25 % - 25vh
- 33 % - 33vh
- 50 % - 50vh
- 66 % - 66vh
- 75 % - 75vh
- 100 % - 100vh.
ScrollbarHEnable / disable horizontal scrollbars. The default value is set to False.
ScrollbarVIs necessary for infinite scrolling. Setting the property to True resets the Row Height and Header Height properties from auto to undefined because there are required defined heights values for correct table calculations. The default value is set to False.
Column modeColumn modes allow having a variety of different ways to apply column width distribution to the columns using:
Standard - columns are distributed given the width is defined in the column options;
Flex - distribute the width's grow factor relative to other columns. It works the same as the flex-grow API in CSS. Basically, it takes any available extra width and distributes it proportionally according to each column's Flex Grow value. Flex is not suggested when the ScrollbarH property is set to True;
Force force the widths of the columns to distribute equally but overflows when the min-width of each column is reached. Force is usually the ideal column distribution method when columns do not need to be fixed-sized.
ThemeSet the default style of a datatable. It means appending a special CSS class of a predefined theme to the datatable element. The value types are Material (default), Dark, Bootstrap.
ReordableEnable/disable the ability to re-order columns by dragging them. Value type: boolean. The default value is set to True.
Row ClassThe function used to populate a row's CSS class. The function will take a row and return a string or object. The value type is Function.
It makes adding custom classes depending on specific conditions possible.
Create a new function under the CODE tab of the Visual Editor and choose the created function for the property.

(row) => { return { 'old': row.age > 50, 'young': row.age <= 50, 'woman': row.gender === 'female', 'man': row.gender === 'male' } }
SortsUsed to determine the default column for sorting. The default is set to empty (unsorted).
Column Name - enter text to name a column.
Direction - set the sorting direction: asc (ascending) or desc (descending).
MessagesStatic messages in the table that can be overridden for localization.
Value types:
Empty Message - a message to show when an array with no values is presented;
Selected Message - footer selected message;
Total Message - footer whole message.
Css ClassesCustom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager.
If entered, custom classes for icons will replace existing classes.
Value types:
Pager Left Arrow - the default value is set to datatable-icon-left;
Pager Next - the default value is set to datatable-icon-skip;
Pager Previous - the default value is set to datatable-icon-prev;
Pager Right Arrow - the default value is set to datatable-icon-right;
Sort Ascending - the default value is set to datatable-icon-down;
Sort Descending - the default value is set to datatable-icon-up.
(select)Action to be triggered when the component is selected.

DataTableCol

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

Property NameProperty Description
NameColumn label. If none is specified, it will use the prop value and decimalize it.
PropertyThe property to bind the row values to. If undefined, it will camelcase the name value.
ResizeableThe column can be resized manually by the user. The default is set to True.
Can Auto ResizeDefine whether the column can automatically resize to fill extra space. The default is set to True.
SortableSorting of the row values by this column. The default is set to True.
DraggableDefine if the column can be dragged to re-order. The default is set to True.
CheckboxableIndicate whether the column should show a check box component for selection. Only applicable when the selection mode is Checkbox.
Header CheckboxableIndicate whether the column should show a check box component in the header cell. Only applicable when the selection mode is Checkbox.
Frozen LeftDetermines if the column is frozen to the left.
Frozen RightDetermines if the column is frozen to the right.
Cell TemplateClick the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom body cell templates.
Header TemplateClick the Edit button to access the HTML editor. Angular TemplateRef allows authoring custom header cell templates.
WidthThe width of the column by default in pixels. The default is set to 150.
Min WidthThe minimum width of the column in pixels. The default is set to 100.
Max WidthThe maximum width of the column in pixels.
Flex GrowThe grow factor relative to other columns. Same as the flex-grow API. It will any available extra width and distribute it proportionally according to all columns' flexGrow values. The default is set to 0.
Cell ClassCell classes to apply to the body cell.
Header ClassHeader CSS classes to apply to the header cell.

Datetime

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

Properties

The Datetime component has the following properties:

Common Properties

Property NameProperty Description
ValueThe value of the datetime as a valid ISO 8601 datetime string.
Click the Calendar icon to set the needed value.
PlaceholderInstructional text that shows before the datetime has a value.
Placeholder InternationalizationIf set to True then use the Placeholder Text property for internationalization.
ReadonlyIf set to True, the value can not be modified. The default is set to False.
MinThe minimum datetime allowed. Click the Calendar icon to set the needed value.
MaxThe maximum datetime allowed. Click the Calendar icon to set the needed value.
Display FormatThe display format of the date and time as text that shows within the item. Select the appropriate from the dropdown or enter your value.
PickerAdd a picker to the datetime. The value types are:
Cancel text- the text to display on the picker's cancel button.
Done Text - the text to display on the picker's done button.
Picker Format - the format of the date and time picker columns the user selects. Select the needed format from the dropdown or enter your value.
Picker Options - any additional options that the picker interface can accept.
Year ValuesComma-separated values used to create the list of selectable years.
MonthMonth picker options:
Names - full comma-separated names for each month's name. This can be used to provide locale month names. Defaults are set to English.
Short Names - short comma-separated abbreviated names for each month's name. This can be used to provide locale month names. Defaults are set to English.
Values - comma-separated values used to create the list of selectable months.
DayDay picker options:
Names - full comma-separated names of the day of the week. This can be used to provide locale names for each day in the week. Defaults are set to English.
Short Names - short abbreviated day of the week comma-separated names. This can be used to provide locale names for each day in the week. Defaults are set to English.
Values - comma-separated values used to create the list of selectable days.
Hour ValuesComma-separated values used to create the list of selectable hours.
Minute ValuesComma-separated values used to create the list of selectable minutes.
SlotPosition inside another component: Start or End. Defaults are set to «».
[(ngModel)]Angular directive for data binding.
(ionChange)The event emitted when the value has changed.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The default value of the Slot property has been changed: End -> «».

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the input will be wrapped in tag.
Color - item wrapper Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Disabled - if set to true, the user cannot interact with the component. The default is set to False.
Lines - define how the bottom border should be displayed on the item. The available options are Full, Inset or None.
Mode - determine which platform styles to use. Possible values are iOS or MD.
Class - define equal styles for elements with the same class name.
Slot - position inside another component: Fixed.
LabelText - label text.
Position - determine where and how the label behaves inside an item. The possible values are Fixed, Stacked, or Floating.
Color - label Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Mode - determine which platform styles to use. Possible values are iOS or MD.
Slot - label position in tag (Start or End).
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderReorder properties:
Type - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag.
Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon.
Slot - position inside the item: Start or End.
Custom 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.

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

Styles Properties

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

Property NameProperty Description
MarginSet the margin area of an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
Placeholder ColorSelect CSS color of a datetime placeholder from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.

Using Datetime as a Form Control

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

1386

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:

Property NameProperty Description
ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
HeightSet the height of a divider in px, em, vh, and vw.
PaddingSet the padding area of an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.

File Picker

The File Picker component allows you to select files.

Properties

The File Picker component has the following properties:

Common Properties

Property NameProperty Description
NameName of the input if used in a Form.
TypeClick to select the type of the button to invoke file select dialog (Button or Image).
Files CountIf set to True (default), files count message will be shown.
Files ListIf set to True (default), selected files list will be shown.
Show Remove IconIf set to True (default), Remove File Icon will be shown.
MultipleIf set to True, multiple files can be selected.
File TypesComma-separated list of one or more file types. There is a predefined list of file types: Image, Video, Audio, Document, Archive; you can also add your own types. For example: .jpg, .png.

Styles Properties

The File Picker component has the following property under the Styles tab to be styled to look like in a specific way:

Property NameProperty Description
Background ColorSet the CSS color of background of an element selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.

🚧

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:

Property NameProperty Description
Button TextText of the button. For this property, I18n is enabled.

Styles Properties

The File Picker Button component has the following Styles properties:

Property NameProperty Description
Button ColorSet the CSS button color selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Text ColorSet the CSS color of button text selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.

🚧

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:

Property NameProperty Description
ImageClick the Change button to select the uploaded image from Media Manager.

Styles Properties

The File Picker Image component has the following Styles properties:

Property NameProperty Description
HeightSet the height of an image in px, %, em, vh, and vw.
WidthSet the width of an image in px, %, em, vh, and vw.
MarginSet the image margin area in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.

🚧

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

Property NameProperty Description
TextEnter custom text instead of files(s). For this property, I18n is enabled.
No File TextLabel for no files selected. If not set, the default label is No file chosen. For this property, I18n is enabled.

Styles Properties

The File Picker Counter component has the following Styles properties:

Property NameProperty Description
Text ColorSet the CSS color of image text selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Font SizeSet the font size in px, %, em, vh, and vw.
Font StyleSet the font style; follows the CSS font-style options (Normal or Italic).
PaddingSet the padding area of an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.

🚧

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

Property NameProperty Description
Text ColorSet the CSS text color selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
Font SizeSet the font size in px, %, em, vh, and vw.
Font StyleSet the font style; follows the CSS font-style options (i.e. Normal, Italic).
Background ColorSet the CSS color of background of an element selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
PaddingSet the padding area of an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.

🚧

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

Property NameProperty Description
SizeThe icon size. Possible values are Small or Large.
Icon ColorSet the icon color by selecting CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the margin area an element in px, %, em, vh, and vw:
All sides, Top, Right, Bottom, Left.

🚧

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:

2764

🚧

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>
  1. 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.

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

StateDescription
validA control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.
invalidAn error exists in the input value. If the control is not present, null is returned.
pendingAsync validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.
disabledThe control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.
enabledThe control is included in ancestor calculations of validity or value. If the control is not present, null is returned.
pristineThe user has not yet changed the value in the UI. If the control is not present, null is returned.
dirtyThe user has changed the value in the UI. If the control is not present, null is returned.
touchedThe user has triggered a blur event on it. If the control is not present, null is returned.
untouchedThe user has not yet triggered a blur event on it. If the control is not present, null is returned.
errorsReports the control's validation errors.

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 a validation error.

Let's see 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.

Properties

Common Properties

Property NameProperty Description
NovalidateThis boolean attribute indicates that the form shouldn't be validated when submitted.
Native validationIf set to True, native HTML5 validation is used instead of Angular validation. The form will work as the default HTML .
Form IDA unique word identifying the component (Template reference variable) that contains current form information. Used in component's properties as a variable containing the form state.
Update OnControl when the value or the validity is updated: Change, Blur, Submit
FeaturesAdvanced options containing default HTML form attributes.
- Action - the URL that processes the form submission. Specifies where to send the form-data when a form is submitted. Disabled if Form submit or (ngSubmit) is used.
- Enctype - specifies how the form-data should be encoded when submitting it to the server (only if Method is set to post).
The Enctype property has the following options:
application/x-www-form-urlencoded - default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values);
multipart/form-data - no characters are encoded. This value is required when you are using forms that have a file upload control;
text/plain - spaces are converted to + symbols, but no special characters are encoded.
- Method specifies the HTTP method (get or post) to use when sending form-data:
get appends form-data into the URL in name/value pairs.
The length of a URL is limited (about 3000 characters).
Never use GET to send sensitive data! (will be visible in the URL), it is better used for non-secure data, like query strings in Google.
Useful for form submissions where a user wants to bookmark the result.
post appends form-data inside the body of the HTTP request (data is not shown in URL). It has no size limitations.
Form submissions with POST cannot be bookmarked.
- Target specifies where to display the response that is received after submitting the form:
Blank - the response is displayed in a new window or tab.
Self - the response is displayed in the same frame (default);
Parent - the response is displayed in the parent frame.
Top - the response is displayed in the full body of the window.
(ngSubmit)The event emitted when the form is submitted.
The event Form submit takes precedence over the Action property.

🚧

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 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();

Styles Properties

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

Property NameProperty Description
DisplaySet the card display behavior (the type of rendering box) 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 effect
HeightSet form's height n px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
WidthSet the form's width in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
PaddingSet the form padding area in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Background ColorSelect the background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw:All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.

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 properties:

Property NameProperty Description
Map TypeThe map MapType ID. The allowed values are roadmap (default), hybrid, satellite, terrain, string.
Full Screen ControlThe initial enabled/disabled state of the fullscreen control.
Gesture HandlingControl how gestures on the map are handled. Allowed values are cooperative, greedy, none, auto. The default is set to auto.
Map DraggableEnable to make the map draggable.
Zoom ControlThe enabled/disabled state of zoom control.
If set to True (default), the zoom control can be used on the map.
ZoomThe zoom level of the map. The default zoom level is set to 8.
Disable ZoomIf set to True, the map zoom cannot be used when double-clicking. Defaults are set to False.
ScrollwheelThe Scrollwheel property set to true/false enables/disables the scroll wheel to scale the Google Map.
The Scrollwheel property with a null value is used for working Gesture Handling property with a cooperative value.
Scrollwheel is enabled by default.
View pointGoogle Map view point properties:
Latitude that defines the center of the map.
Longitude defines the center of the map.

πŸ“˜

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:

857

The Marker component has the following properties:

Property NameProperty Description
Marker ClickableIf set to True(default), the marker can be clicked. The default value is set to true.
Marker DraggableIf set to True, the marker becomes draggable. The default value is set to False.
Add Info WindowIf set to True, an information window will be added to the marker. These properties exist only inside the visual editor.
Open Info WindowIf set to True (default), the info window will automatically open when the marker is clicked.
CoordsGoogle Map marker position.
latitude - the latitude position of the marker.
longitude - the longitude position of the marker.

πŸ“˜

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:

990

The Google Map Window component has the following properties:

Property NameProperty Description
Is OpenSet the open state for the info window.
Disable Auto PanDisable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.
Max WidthThe maximum width of the info window, regardless of content width. This value is only considered if set before a call to open.
Z-IndexAll info windows are displayed on the map in order of their zIndex, with higher values displaying in front of info windows with lower values.

🚧

Setting the addInfoWindow property to False will remove the Google Map Window from the Marker (Ionic5GoogleMapMarkerBean 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

Property NameProperty Description
GridIf set to False, rows are used without a grid. The default is set to True.
PaddingAdd paddings to the grid and immediate children columns. The possible values are Padding, No Padding, Padding Top, Padding Start, Padding End, Padding Bottom, Padding Vertical, Padding Horizontal.

Styles Properties

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

Property NameProperty Description
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
FixedIf set to True, the grid will have a fixed width based on the screen size. The default is set to false.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
WidthSet an element's width in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
HeightSet an element's height in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.

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:

Property NameProperty Description
Justify ContentHorizontal alignment of all cells (start, center, end, space-around, space-between, space-evenly).
Align itemsVertical alignment of all cells (start, center, end, stretch, baseline), unless they specify their own alignment.
Flex WrapWrapping of cells: wrap, nowrap - forces the cells to a single row, or wrap reverse - the cells will wrap in reverse.

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:

Property NameProperty Description
MarginSet the cell margin area in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the element's padding area in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
SizeThe size of the cell, in terms of how many cells it should take up out of the total available. If auto is passed, the cell will be the size of its content.
Size - the size of the cell for all screens.
Size Lg - the size of the cell for Lg screens
Size Md - the size of the cell for Md screens
Size Sm - the size of the cell for Sm screens
Size Xl - the size of the cell for Xl screens
Size Xs - the size of the cell for Xs screens.
OffsetThe amount to offset the column, in terms of how many columns it should shift to the right of the total available.
Offset - the offset of the cell for all screens.
Offset Lg - the offset of the cell for Lg screens
Offset Md - the offset of the cell for Md screens
Offset Sm - the offset of the cell for Sm screens
Offset Xl - the offset of the cell for Xl screens
Offset Xs -the offset of the cell for Xs screens.
PullThe amount to pull the cell, in terms of how many cells it should shift to the left of the total available.
Pull - the pull of the cell for all screens.
Pull Lg - the pull of the cell for Lg screens
Pull Md - the pull of the cell for Md screens
Pull Sm - the pull of the cell for Sm screens
Pull Xl - the pull of the cell for Xl screens
Pull Xs - the pull of the cell for Xs screens.
PushThe amount to push the cell, in terms of how many cells it should shift to the right of the total available.
Push - the push of the cell for all screens.
Push Lg - the push of the cell for Lg screens
Push Md - the push of the cell for Md screens
Push Sm - the push of the cell for Sm screens
Push Xl - the push of the cell for Xl screens
Push Xs - the push of the cell for Xs screens.
Align SelfVertical alignment of all columns (auto, start, center, end, stretch, baseline), unless they specify their own alignment.
Background ImageClick 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.
Background ColorSelect the background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
WidthSet an element's width in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
HeightSet an element's height in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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 AlignmentAlign the inline contents.
Possible values are text-left, text-right, text-start. text-end, text-center, text-justify.
Read more about Text Alignment.

πŸ“˜

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

Property NameProperty Description
ContainerSet 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.
HTMLContents of the HTML component.
Click the Edit button to open the HTML editor.
Parse HTMLClick Parse to create Appery.io components from any HTML code copied from 3rd party resources. Learn more here.
Wrapper StyleUse 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 NameProperty Description
DisplaySet 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 effect.
WidthSet an element's width in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
HeightSet an element's height in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PositionType - set how an element is positioned in a document: Static, Relative, Fixed, Absolute, or Sticky;
Top - set the top margin edge for a positioned box in px, %, em, vh, and vw;
Right - set the right margin edge for a positioned box in px, %, em, vh, and vw;
Bottom - sets the bottom margin edge for a positioned box in px, %, em, vh, and vw;
Left - set the left margin edge for a positioned box in px, %, em, vh, and vw.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Background ImageClick 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.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Text AlignSet 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 AlignSet the vertical alignment of an element (inline or inline-block): Baseline, Middle, Sub, Super, Top, Bottom, Text-top, Text-bottom.
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Font SizeEnter font size in px, %, em, vh, and vw.
Font WeightSet the weight (or boldness) of the font: Normal or Bold.
Line HeightSet 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 StyleSet whether a font should be styled with a Normal or Italic face.
Text DecorationSet the appearance of decorative lines on 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.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.

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

Property NameProperty Description
NameIonic 5 icons. Click the default logo-ionic button to open the Select icon modal window.
Custom SVG IconAllow selecting a custom icon .svg, puts it's Url in the <src> attribute. The external file can only be a valid .svg and does not allow scripts or events within the .svg element.
Click the Change button to select the uploaded image from Media Manager.

Styles Properties

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

Property NameProperty Description
Icon ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
SizeThe icon size. Possible values are: Small or Large.
HeightSet an element's height in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
WidthSet an element's width in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
DisplaySet 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 effect.
Vertical AlignSet the vertical alignment of an element (inline or inline-block): Baseline, Middle, Sub, Super, Top, Bottom, Text-top, Text-bottom.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The Mode property has been removed.

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

Property NameProperty Description
ImageClick the Change button to select the uploaded image from Media Manager.
Ionic ImageIf set to True, image tag <img> will be changed to Ionic 5 image tag <ion-img>. The default is set to True.
WrapperChoose Ionic tag (Avatar or Thumbnail) that will be used as a wrapper of a default image.
ResponsiveIf set to True, automatically adjusts to fit the screen size. The default is set to False.
ShapeImage style. Used for default HTML images only.
Alt. TextThis attribute defines the alternative text describing the image.
Alt Text InternationalizationIf set to True then use the Alt. Text property for internationalization.

πŸ“˜

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

Styles Properties

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

Property NameProperty Description
HeightSet an element's height in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
WidthSet an element's width in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
DisplaySet 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 effect.
Vertical AlignSet the vertical alignment of an element (inline or inline-block): Baseline, Middle, Sub, Super, Top, Bottom, Text-top, Text-bottom.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.

Visit the Ionic documentation to read more about Images.

Input

The Input 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.

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:

1385

πŸ“˜

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.

🚧

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

Properties

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

Common Properties

Property NameProperty Description
ValueInput value.
PlaceholderInstructional text that shows before the input has a value.
InternationalizationIf set to True then use the Placeholder property for internationalization.
NameThe name of the control, which is submitted with the form data.
DebounceSet the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke. The default is set to 0.
Enter Key HintAn input attribute that specifies what action label or icon to present for the enter key on virtual keyboards: Enter, Done, Go, Next, Previous, Search, Send.
Input ModeAn input attribute indicating which type of keyboard to display: None, Decimal, Email, Numeric, Search, Tel, Text, Url.
ReadonlyIf set to True, the value can not be modified. The default is set to False.
TypeThe type of control to display. The possible values are Text (default), Password, Email, Number, Search, Tel, URL, Date, Time or File.
If the Password type is set, the Add show icon property becomes available and if set to true, the Show/Hide password icon will be added to the component.
FeaturesAccept - if the value of the type attribute is File, this attribute will indicate the types of files acceptable by the server, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
Autocapitalize - indicate whether and how the text value should be automatically capitalized while being entered/edited. The default is set to None.
Autocomplete - indicate whether the value of the control can be automatically completed by the browser. The default: is set to Off.
Autocorrect - whether auto-correction should be enabled while the text value is being entered/edited. The default is set to Off.
Autofocus - this boolean attribute allows specifying that a Form Control should have input focus when the page loads. The default is set to False.
Clear Input - if set to True, a clear icon will appear in the input when there is a value. Clicking it clears the input. The default is set to False.
Clear On Edit - if set to True, the value will be cleared after focus upon editing. Defaults are set to true when type is Password or False for all other types.
Max - the maximum value, which must not be less than its minimum (min attribute) value.
Max Length - if the value of the type attribute is Text, Email, Search, Password, tel or URL, this attribute specifies the maximum number of characters to be entered.
Min - the minimum value, which must not be greater than its maximum (max attribute) value.
Min Length - if the value of the type attribute is Text, Email, Search, Password, tel or URL, this attribute specifies the minimum number of characters to be entered.
Multiple - if set to True, more than one value can be entered. This attribute applies when the type attribute is set to Email or File, otherwise it is ignored.
Pattern - a regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to get help. This attribute applies when the value of the type attribute is Text, Search, Tel, URL, Email, or Password, otherwise it is ignored.
Size - the initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters.
Spellcheck - to check the element's spelling and grammar, set to True. The default is set to False.
Step - work with the min and max attributes to limit the increments at which a value can be set. Possible values are any or a positive floating point number.
[(ngModel)]Angular directive for data binding.
(ionChange)The event emitted when the value has changed.
(ionFocus)The event emitted when the input has focus.
(ionInput)The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the input will be wrapped in the ion-item tag.
Color - item wrapper Ionic 5 color: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, or Dark.
Disabled - if set to true, the user cannot interact with the component. Defaults are set to false.
Lines - how the bottom border should be displayed on the item. Available options are Full, Inset or None.
IconIonic 5 input icon.
Name - allows changing Ionic 5 icon style dynamically by property binding to [name]. You can use string (Ionic 5 Icon name e.g. star) or variable names.
Style - Ionic 5 icons. Click the No icon button to open the Select icon modal window.
Class - icon CSS classes.
Color - icon color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Slot - icon position in the ion-item tag (Start or End).
Custom SVG Icon - select an .svg file. This path will be added as the src attribute. Click the Change icon button to select the uploaded image from Media Manager.
LabelIf label is used, the input will be wrapped in the <ion-item> tag.
Text - label text.
Position - determine where and how the label behaves inside an item. The possible values are Inline, Fixed, Stacked or Floating.
Color - label Ionic color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Slot - label position in the ion-item tag (Start or End).
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderReorder properties:
Type - if set to Wrapper, the item will be wrapped into a reorder tag.
Icon - custom icon for reorder with a type Content.
Click the Default icon button to select the needed icon.
Custom 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.

The date value is always formatted as yyyy-mm-dd.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The Mode property has been removed from the Icon section.

Styles Properties

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

Property NameProperty Description
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Min WidthSet the minimum width of an element in px, %, em, vh, and vw.
WidthSet the width of an element in px, %, em, vh, and vw.
Max WidthSet the maximum width of an element in px, %, em, vh, and vw.
Min HeightSet the minimum height of an element in px, %, em, vh, and vw.
HeightSet the height of an element in px, %, em, vh, and vw.
Max HeightSet the maximum height of an element in px, %, em, vh, and vw.

Visit the Ionic documentation to read more about Inputs.

πŸ“˜

Input is used as List Item if any of the below properties are set:

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

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

Property NameProperty Description
Route NameList of routes names defined on the Routing tab.
Route ParamsSet the value of Route Params to pass some parameters in URL at navigation. Several values should be separated with commas (param1, param2, ...).
TextThe displayed link ext.
Text InternationalizationIf set to True then use the Text property for internationalization.
Preset ModeSpecify a mode with the properties that can be set.
There are different tags to be used for the link depending on the chosen Preset mode:
Ionic 5 or Custom that define what Container values will be preselected (see below for more details).
(click)The event emitted when the link is clicked.

🚧

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

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

Property NameProperty Description
ContainerIonic 5 component used as the link (options: ion-text, ion-label, ion-note, or ion-badge).
Router DirectionWhen using a router, specifies the transition direction when navigating to another page using href: back, forward, root.

The Custom Preset Mode properties are the following:

Property NameProperty Description
HrefThe property contains a URL or a URL fragment that the hyperlink points to.
If this property is set, an anchor tag will be rendered.
ContainerHTML tag used for the link: a, p, span, div.
TargetSpecify where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top.
RelSpecify the relationship of the target object to the link object.

Styles Properties

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

Property DescriptionProperty Description
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
DisplaySet 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 effect.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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 AlignSet the horizontal alignment of the text by using the group of predefined buttons:
align to the left
center
align to the right
justify - stretch the lines so that each line has equal width.
Font SizeEnter font size in px, %, em, vh, and vw.
Font WeightSet the weight (or boldness) of the font: Normal or Bold.
Line HeightSet 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 StyleSet whether a font should be styled with a Normal or Italic face.
Text DecorationSet the appearance of decorative lines on 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.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The property Download has been removed from the component's properties list.

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

Property NameProperty Description
ContainerDefine a container type for including items: Items list or Items group.

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

Property NameProperty Description
LinesDefine how the bottom border should be displayed on the item: Full, Inset, None.
InsetIf set to True, the list will have a margin around it and rounded corners.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The property List has been renamed to Container.

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

Property NameProperty Description
Item TypeUsed to change the Item role (Item Divider, Item Sliding, List Header).
Sliding SidesIs visible if Item Type is set to Item Sliding.
Available sides of Item Sliding: Start, End, or Both.
LabelIf set to True, adds a label to the list Item.
Sliding StateIs visible if Item Type is set to Item Sliding.
Switch a state of item sliding in the Visual Editor: Swipe Right or Swipe Left.
RoutingRoute Name - list of routes names from the Routing panel.
Route Params - adds values for Route Params described in the Routing panel.
Router Direction - when using a router, it specifies the transition direction when navigating to another page using href: back, forward, root.
Link FeaturesOptions for the component used as a link:
Download - this attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name
Href - specifies the relationship of the target object to the link object.
Type - the type of the button: Submit, Reset, Button.
Target - specifies where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top.
Rel - specifies the relationship of the target object to the link object.

Styles Properties

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

Property NameProperty Description
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Line StyleDefine how the bottom border should be displayed on the item: Full, Inset, None.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
StickyIs visible if Item Type is set to Item Divider.
When set to True, the item-divider will stay visible when it reaches the top of the viewport until the next ion-item-divider replaces it.
ButtonIf set to true, a button tag will be rendered and the item will be tappable.
DetailIf set to true, a detail arrow will appear on the item
Detail IconThe icon to use when Detail is set to true.
Click the Default icon button to select a needed icon.
Custom SVG IconIs 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.

πŸ“˜

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.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The property Features has been removed with migrating all the data to the following components and properties:

  • The Item Type property has migrated to the List Item properties list.
  • The [Item Type](List Item) property with the Item Group value has migrated to the Container property of the List component.
  • The List Item section with the Item Type property set in the Item Reorder Group has transformed to the ReorderGroup component.
  • The section with the Item Type property set in the Item Radio Group has transformed to the RadioGroup component.
  • The Reorder Disabled property of the List Item has migrated to the ReorderGroup component.
  • The Sliding Sides property has migrated to the Item Type set as Item Divider Sliding.
  • The Sticky property has migrated to the Item Type set as Item Divider.

The property Download has been removed from under the Link Features additional menu.
Also, the Mode property has been removed from the Icon section (can be found for Item Options of the List Item component with its Item Type property set as Item Sliding.

Item Label

The Item Label component has the following properties:

Common properties

Property NameProperty Description
TextList item label text.
Text InternationalizationIf set to True then use the Text property for internationalization.

Styles Properties

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

Property NameProperty Description
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
PositionDetermine where and how the label behaves inside an item: Fixed, Stacked or Floating.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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 AlignSet 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.
Font SizeEnter font size in px, %, em, vh, and vw.
Font WeightSet the weight (or boldness) of the font: Normal or Bold.
Line HeightSet 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 StyleSet whether a font should be styled with a Normal or Italic face.
Text DecorationSet the appearance of decorative lines on 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.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.
Background ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

In the following example, a list has three list items with their item labels having different Position values (Fixed, Stacked, and Floating):

1345

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

459

Item Options

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

1349

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:

1538

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

Property NameProperty Description
HrefContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
IconStyle - click No icon to change the icon style by selecting a needed icon.
Name - allow changing Ionic 5 icon style dynamically by property binding to [name].
Color - the icon CSS color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Class - icon CSS classes.
Slot - the position determines where and how the icon behaves inside an element: Start, Top, Icon Only, Bottom, or End.
Custom SVG Icon - 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.
(click)Action to be triggered when the option is clicked.

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

Property NameProperty Description
ExpandableIf set to True, the option will expand to take up the available width and cover any other options.
Option ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw:
All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.

πŸ“˜

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 radiobuttons. 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 a RadioGroup Header and Radiobuttons. By default, the RadioGroup has 3 Radiobuttons. To insert more buttons, use the + button on the RadioGroup components or drag & drop a Radiobutton from the PALETTE to the Visual Editor canvas. 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.

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:

1348

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.

Properties

The RadioGroup component has the following properties:

Common Properties

Property NameProperty Description
ValueThe value of the radio group.
NameThe name of the control, which is submitted with the form data.
Empty SelectionIf set to True, radios can be deselected.
Buttons directionUse the CSS flexbox layout to set buttons direction (Vertical or Horizontal) of radio buttons.
Group HeaderIf set to True, adds a header of the radio group. Hidden if the Horizontal direction is chosen.
Initial ValueDefault value of the control before it's been changed.
Control IDName of the control. Used in components properties as the variable containing the control state.
Control OptionsAdvanced Form Control options.
Update On - controls when the value or the validity is updated: Change, Blur, or Submit.
Standalone - when set to True, the component will not register itself with its parent form but act as if it's not in the form.
ValidationShow Validation Errors - validation errors will be shown with with the field value set to True.
Error Message Class - add your class name(s) to customize error messages.
Required - If set to True, the user must fill in a value before submitting a form.
Message for Required - add your custom error message for Required.
[(ngModel)]Angular directive for data binding.
(ionChange)The event emitted when the value has changed.

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

Styles Properties

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

Property NameProperty Description
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border WidthSet the line width of an element's border in px, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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.
DisplaySet 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 effect.
Background ColorSelect CSScolor from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

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.

Radiobutton

Radiobuttons are used as a set of related options inside of a group and cannot be used alone like it was in Ionic 4. Pressing on a radiobutton will check it.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

  • The separate Radiobutton component has been removed from the Components PALETTE and can be used only inside the parent RadioGroup component.
  • The List Item section with the Item Type property set in the Item Radio Group has transformed to the RadioGroup component.

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

Properties

The Radiobutton component has the following properties:

Property NameProperty Description
ValueThe value of the radiobutton.
ColorSelect from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
[(ngModel)]Angular directive for data binding.
(ionSelect)The event emitted when the radiobutton is selected.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The properties Checked, and ionSelect are removed.
Also, the (ionSelect) event is not available for Ionic 5. So, if your Ionic 4 app had a selected value, it will be emitted with the Value property on the condition that the Value property for the Radiobutton component is defined and the Value property for RadioGroup is not defined.

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

1287

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

If mapping was used for the Checked property of the component, it will be deleted as there is no such property in Ionic 5.

When the Item Wrapped property is set to True, the component will be included in the item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the input will be wrapped in the <ion-item> tag.
Color - select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Lines - define how the bottom border should be displayed on the item. The available options are Full, Inset or None.
LabelIf the label is used, the input will be wrapped in the <ion-item> tag.
Text - label text.
Position - determine where and how the label behaves inside an item. The possible values are Fixed, Stacked or Floating.
Color - select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Internationalization- if set to True then use the Label Text property for internationalization.

πŸ“˜

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.

Visit the Ionic documentation to read more about Radiobuttons.

Range

The Range 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.

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):

1370

🚧

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

Properties

The Range component has the following properties:

Common Properties

Property NameProperty Description
ValueThe value of the range.
NameThe name of the control, which is submitted with the form data.
ColorThe color to use from your application's color palette.
Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Dual KnobsShow two knobs by setting the value to True.
MaxMaximum integer value of the range.
MinMinimum integer value of the range.
StepSpecify the value granularity.
PinIf set to True, a pin with integer value is shown when the knob is pressed.
SnapsIf set to True, the knob snaps to tick marks evenly spaced based on the step property value.
TicksIf set to True, tick marks are displayed based on the step value. Only applies when Snaps is set to True.
DebounceSet for how long, in milliseconds, to wait to trigger the ionChange event after each change in the range value.
Left (Right) LabelProperties of a label added on the left (right) side of the range:
Class - define equal styles for elements with the same class name
Color - select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Mode - determines which platform styles to use. Possible values are: iOS or MD.
Text - the displayed label text.
Internationalization- if set to True then use the Label Text property for internationalization.
Left (Right) IconProperties of an icon added on the left (right) side of the range:
Style - Ionic 5 name of the icon used.
Name - allow changing Ionic 5 icon style dynamically by property binding to the [name] element property. You can use string (Ionic 5 Icon name e.g. 'star') or a variable name.
Class - CSS classes for the icon.
Color - the color to use from your application's color palette. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Mode - determine which platform styles to use. Possible values are: iOS or MD.
Internationalization- if set to True then use the Label Text property for internationalization.
[(ngModel)]Angular directive for data binding. Contains a variable with the current value of the group.
(ionChange)The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The Mode property has been removed from the Icon section (Left (Right) Icon).

Property NameProperty Description
Item WrapperColor - item wrapper Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Disabled - if set to true, the user cannot interact with the component. The default is set to False.
Lines - define how the bottom border should be displayed on the item. The available options are Full, Inset or None.
Mode - determine which platform styles to use. Possible values are iOS or MD.
Class - define equal styles for elements with the same class name.
Slot - position inside another component: Fixed.
ReorderType - Content or Wrapper. If Wrapper is used, the item will be wrapped into a Reorder tag.
Icon - custom icon for Reorder with a type Content. Click the Default icon button to select the needed icon.
Slot - position inside the item: Start or End.
Custom 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.

Styles Properties

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

Property NameProperty Description
Range ColorSet a common color scheme of the range - select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
BarBackground Color - select CSS color of the range bar from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Background Color Active - select the background of the active range bar: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border Radius - border radius of the range bar in px, %, em, vh, and vw.
Height - height of the range bar in px, %, em, vh, and vw.
KnobBackground Color - select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border Radius - border radius of the range knob in px, %, em, vh, and vw.
Size - size of the range knob in px, %, em, vh, and vw.
PinBackground Color - select CSS background color of the range pin 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 of the range pin from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.

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.

Properties

The Reorder component has the following properties:

Property NameProperty Description
TypeUsed to determine the default composition of the elements within the ReorderGroup.
Set the Type value to Content to be able to move components inside the ReorderGroup using a special two-line icon, with interaction for each component available.
With Type set to Wrapper, components within the ReorderGroup will move using the entire Reorder with no interaction available for the included components.
Please see the below example for details.

Example with modifying Reorder Type Property

In this example, we have a Reorder Group with three Reorder components each nesting one UI component: Checkbox, Datetime and Input.
For the Checkbox Reorder and the Input Reorder components, Type is set to Content:

967

Checkbox Reorder Type = Content

However, the Type property is set to Wrapper for the Datetime Reorder component:

962

Datetime Reorder Type = Wrapper

Check out the different behavior for the nested UI components:

519

πŸ‘

Important!

Under the EVENTS tab, for the ReorderGroup component, the Item reorder > Reorder complete action should be defined and saved:

1348

🚧

Note!

The space of the Reorder component with Type = Content looks smaller than the space of the child components added to the ReorderGroup or inside a Reorder component with Type = Wrapped.

This relates to the UI components with the Item Wrapper property set to True only!

To fix this behavior, all you need to do is set Item Wrapped = False (or use Class) to set the desired look for a component:

1267

As a result, the component space extends:

1038

Check out the example with three Input components:

945
  • Input2 placed inside a Reorder component with its Item Wrapped property set to True:
950
  • Input3 that is also placed inside a Reorder component but with its Item Wrapped property changed to False:
949

πŸ‘

Tip!

As you might have noticed, after applying the changes above, the Input3 component appears without its label. So, if you need to recover the look of the modified component but having the bigger input field, you can add, for example, a Text component to the parent Reorder component:

2132

πŸ“˜

Want to know more?

We also have the app template introducing all Ionic 5 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 5 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.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

  • The List Item section with the Item Type property set in the Item Reorder Group has transformed to the ReorderGroup component.
  • The Reorder Disabled property of the Ionic 4 List Item has migrated to the ReorderGroup component.
Property NameProperty Description
(ionItemReorder)The event that needs to be listened to in order to complete the reorder action. After the event has been emitted, the complete() method then needs to be called in order to finalize the reorder action.

Search

Searchbars represent text fields that can be used to search through a collection. They can be displayed inside of 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

Property NameProperty Description
ValueThe searchbar value.
PlaceholderInstructional text that shows before the input has a value. The default is set to Search.
Placeholder InternationalizationIf set to True then use the Placeholder property for internationalization.
Search IconThe icon to be used as the search icon. The default is to search.
Click the Default icon button to select the icon.
Custom Search IconSelect an .svg file. This path will be added as the 'src' attribute. Click the Change button to select to select the uploaded image from Media Manager.
AnimatedIf set to true, enables the search bar animation. The default is set to false.
AutocompleteIndicates whether the value of the control can be automatically completed by the browser. The values are On and Off (default).
AutocorrectIndicate whether auto correction should be enabled when the the text value is being entered/edited. The values are On and Off (default).
Enter Key HintAn input attribute that specifies what action label or icon to present for the enter key on virtual keyboards: Enter, Done, Go, Next, Previous, Search, Send.
Input ModeAn input attribute indicating which type of keyboard to display: None, Decimal, Email, Numeric, Search, Tel, Text, Url.
SpellcheckIf set to true, enables spellcheck on the input. The default is set to false.
DebounceIndicate for how long, in milliseconds, to wait to trigger the ionInput event after each keystroke. The default is set to 250.
Clear IconSet the clear icon. The default is to close-circle for iOS and close for MD.
Click the Default icon button to select the icon.
Custom Clear IconSelect an .svg file. This path will be added as the 'src' attribute. Click the Change button to select to select the uploaded image from Media Manager.
TypeSet the input type of control to display. The values are Text, Password, Email, Number, Search (default), Tel, Url.
Is FocusIf set to True, shows the searchbar when it has focus. Works in the visual editor only.
Cancel ButtonSet the behavior for the cancel button. Can be boolean (true or false) or string.
Icon - sets the cancel button icon. Only applies to the MD mode. The default is set to md-arrow-back. Click the Default icon button to select the icon.
Custom Icon - select an .svg file. This path will be added as the 'src' attribute. Click the Change button to select to select the uploaded image from Media Manager.
Text - set the cancel button text. Only applies to iOS mode. The default is set to Cancel.
Show - set the behavior for the cancel button: Never (default), Always, Focus.
Cancel Button Text Internationalization - if set to True then use the Cancel Button Text property for internationalization.
(ionBlur)Emitted when the search is blurred.
(ionChange)Emitted when the value has changed.
(ionClear)Emitted when the clear button is clicked.
(ionFocus)Emitted when the search has focus.
(ionInput)Emitted when the keyboard input ocurrs.

Styles Properties

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

Property NameProperty Description
Searchbar ColorSet the color of searchbar by selecting from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or using the Color-picker.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

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.

Using Select as a Form Control

The component is the Form Control of Angular form when:

  • it is included into the Form component
  • the Form has the Native validation property disabled (is set to False)
  • it doesn't have the Standalone option under Control Options enabled
  • the component has the property Name specified:
1371

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.

If the Native validation property is enabled, the control can be used as a default HTML Form Control.
By default, the Name property is set as the Component name property and can be customized.
To set the initial value of the control, 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 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.
As a Form Control, 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.

Properties

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

Property NameProperty Description
Item WrappedIf set to True, the component will be included in the item with additional properties
ColorThe color to use from your application's color palette. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name. Defaults are set to primary.
LinesDefine how the bottom border should be displayed on the item. The available options are Full, Inset or None.
LabelIf label is used, the input will be wrapped in the<ion-item> tag.
Text - label text.
Position - the position determines where and how the label behaves inside an item. Possible values are Fixed, Stacked or Floating.
Color - label Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderType - Content or Wrapper. If Wrapper is used, the item will be wrapped into a reorder tag.
Icon - custom Icon for reorder with a type Content. Click the Default icon button to select the icon.
Slot - position inside the item.
Custom SVG Icon - an svg file can be selected. This path will be added as the src attribute. Click the Change button to select to select the uploaded image from Media Manager.
1375

Adding Select

Click the + button on the Select Item Wrapper to add a new Select:

900

The Select component has the following properties:

Common Properties

Property NameProperty Description
PlaceholderThe text to display when the select is empty.
Placeholder Text InternationalizationIf set to True then use the Placeholder property for internationalization.
Selected TextThe text to display instead of the selected option's value.
Selected Text InternationalizationIf set to True then use the Selected Text property for internationalization.
Cancel TextThe text to display on the Cancel button. Defaults are set to Cancel.
Cancel Text InternationalizationIf set to True then use the Cancel Text property for internationalization.
Compare withA property name or function used to compare object values.
OK TextThe text to display on the OK button. Defaults are set to OK.
OK Text InternationalizationIf set to True then use the OK Text property for internationalization.
MultipleIf set to True, the select can accept multiple values.
InterfaceThe interface the select should use: Action Sheet*, Popover, or Alert (default).
Interface OptionsAny additional options that the interface can take.
OpenedThis property is available only for development mode. Defaults are set to False.
[(ngModel)]Angular directive for data binding.
(ionBlur)Emitted when the search is blurred.
(ionCancel)The event emitted when the value has canceled.
(ionChange)Emitted when the value has changed.
(ionFocus)Emitted when the search has focus.

πŸ“˜

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 several attributes to look like in a specific way:

Property NameProperty Description
Text ColorSelect text color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Background ColorSelect background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.

πŸ‘

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:

1373

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

The Selected property has been removed from the Select Option section.

Also, if your Ionic 4 app had a selected value, it will be emitted with the Value property on the condition that the Value property for the Select Option is defined and the Value property for the Select is not defined.

Adding Select Option

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

876

Use double-clicking on the select to show options:

875

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

Property NameProperty Description
ValueThe select option value.
TextThe select option text.

πŸ“˜

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:

1212

πŸ“˜

Note!

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

1177

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

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

If you select to migrate your project from Ionic 4 to Ionic 5, be informed that the following might require you to make changes to your application in order to avoid disruption to your integration:

If Mapping was used for the Selected property of the component, it will be deleted as there is no such property in Ionic 5.

Spinner

The Spinner component provides a variety of animated SVG spinners. Spinners are visual indicators that the app is loading content or performing another process that the user needs to wait on.

The default spinner to use is based on the platform. The default spinner for iOS is lines, and the default for Android is circular. If the platform is neither iOS nor Android, the spinner will be set default to circular. If the Name property is set, the spinner will be used instead of the platform-specific spinner.

Properties

The Spinner component has the following properties:

Common Properties

Property NameProperty Description
Spinner NameThe name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used. Possible values are: lines, lines-small, dots, bubbles, circles, crescent, circular.
DurationDuration of the spinner animation in milliseconds. The default varies based on the spinner.
PausedIf set to true, the spinner's animation will be paused. Defaults are set to false.

Styles Properties:

Property NameProperty Description
Spinner ColorSelect spinner color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Background ColorSelect background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about Ionic 4 Spinner.

Text

The Text component is a simple component that can be used to style the text color of any element. The ion-text element should wrap the element in order to change the text color of that element.

Properties

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

Common properties:

Property NameProperty Description
ContainerYou can use Ionic 5 container to create Ionic 5 text component: ion-text, ion-note, ion-badge, ion-label, ion-card-title, ion-card-subtitle, span, p, div, a, h1-h6, b, i, u, pre, small, bdo, sub, li, legend. If these containers are used, text styles will be changed to Ionic 5. Here, HTML tags are selected as text containers.
TextA component property where the content is to be entered. This field can’t be empty. HTML tags are not supported. Multiline text is supported (lines will be separated with br tag).
Text InternationalizationIf set to True then use the Text property for internationalization.

Any HTML element can be used as the Container property value.
For the ion-label container, an advanced property Position with values Fixed, Stacked or Floating can be added. Check how it works for List item labels here.

The property Slot can be used as an advanced property.

πŸ“˜

The properties Color and Mode work only when Ionic 5 wrapper (e.g. ion-label) is used.

For the ion-label container an advanced property Position with values fixed, stacked or floating can be added.

🚧

The component can include only one Text component as a child. Use the HTML component if you need complex structure.

Styles Properties:

Property NameProperty Description
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
DisplaySet 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 effect.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border WidthSet the line width of an element's border in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Border StyleSet the line style of an element's border.
Available values are: Solid, Dotted, Dashed, and Double.
Border ColorSelect the line style of an element's border from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Border RadiusRound 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 AlignSet 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.
Font SizeEnter font size in px, %, em, vh, and vw.
Font WeightSet the weight (or boldness) of the font: Normal or Bold.
Line HeightSet 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 StyleSet whether a font should be styled with a Normal or Italic face.
Text DecorationSet the appearance of decorative lines on 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.
OpacitySet the opacity of an element. Opacity is the degree to which content behind an element is hidden.
Opacity value must be in range from 0 to 1.
Opacity value must be nonnegative.
Opacity value length can't be more than 10.
Background ColorSelect the background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about Text.

Textarea

The Textarea component is used for multi-line text input. A native Textarea element is rendered inside of the component. The user experience and interactivity of the Textarea component is improved by having control over the native Textarea.

Unlike the native Textarea element, the Ionic Textarea does not support loading its value from the inner content. The Textarea value should be set in the value attribute.

The Textarea component accepts the native Textarea attributes in addition to the Ionic properties.

Properties

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

Common Properties

Property NameProperty Description
PlaceholderInstructional text that shows before the input has a value.
Placeholder InternationalizationIf set to True then use the Placeholder property for internationalization.
ColsThe visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
RowsThe number of visible text lines for the control.
ValueThe textarea value.
NameThe name of the control, which is submitted with the form data.
Auto GrowIf set to true, the element height will increase based on the value.
DebounceThe amount of time set in milliseconds, to wait to trigger the ionChange event after each keystroke. This also impacts form bindings such as ngModel or v-model. The default is set to 0.
ReadonlyIf set to true, the value cannot be modified.
WrapIndicate how the control wraps text: Hard, Off or Soft.
[(ngModel)]Angular directive for data binding.
(ionBlur)The event emitted when the input option is blurred.
(ionChange)The event emitted when the input value has changed.
(ionFocus)The event emitted when the input option has focus.
(ionInput)The event emitted when a keyboard input occurs.

Textarea Features Properties

Property NameProperty Description
AutocapitalizeIndicate whether and how the text value should be automatically capitalized while being entered/edited by the user.
AutofocusThis Boolean attribute allows specifying that a form control should have input focus when the page loads. Defaults are set to false.
Clear On EditIf set to true, the value will be cleared after focus upon edit.
EnterkeyhintA hint to the browser for which enter key to display. Possible values: enter, done, go, next, previous, search, and send.
InputmodeA hint to the browser for which keyboard to display. Possible values: none, text, tel, url, email, numeric, decimal, and search.
MaxlengthThis attribute specifies the maximum number of characters that can be entered.
MinlengthThis attribute specifies the minimum number of characters that can be entered.
RequiredIf set to true, the user must fill in a value before submitting a form.
SpellcheckIf set to true, the user must fill in a value before submitting a form.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the textarea will be wrapped in the ion-item tag.
Color - item wrapper Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Lines - define how the bottom border should be displayed on the item. Available options are Full, Inset or None.
IconButton Ionic 5 icon.
Name - allow changing Ionic 5 icon style dynamically by property binding to [name]. You can use string (Ionic 5 Icon name e.g. star) or variable names.
Color - select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Slot - icon position in the ion-item tag (Start or End).
Style - Ionic 5 icons. Click the No icon button to select the needed icon.
Custom 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.
LabelIf label is used, the input will be wrapped in the <ion-item> tag.
Text - the displayed label text.
Position - determines where and how the label behaves inside an item. The possible values are Fixed, Stacked or Floating.
Color - label Ionic color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderReorder properties:
Type - if set to Wrapper, the item will be wrapped into a reorder tag.
Icon - custom icon for reorder with the Content type. Click the Default icon button to select the needed icon.
Custom 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.

Styles Properties

Property NameProperty Description
Text ColorSelect CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
Background ColorSelect the background color of an element from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about Textarea.

Toggle

The Toggle component changes the state of a single option. They can be switched on or off by pressing or swiping. They can also be checked programmatically by setting the Checked property.

Using Toggle as a Form Control

The component is the Form Control of Angular form when:

  • it is included into the Form component
  • the Form has the Native validation property disabled (is set to False)
  • it doesn't have the Standalone option under Control Options enabled
  • the component has the property Name specified:
1345

🚧

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 or null. If the property isn't specified the initial value will be 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.

As a Form Control, 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

Properties

The Toggle component has the following properties:

Common Properties

Property NameProperty Description
ValueThe value of the toggle does not mean if it is checked or not, use the checked property for that. The value of a toggle is analogous to the value of a <input type=checkbox>, it is only used when the toggle participates in a native form. The default is set to on.
CheckedIf set to true, the toggle is selected. The default is set to false.
Not available if toggle is included into the Form component.
[(ngModel)]Angular directive for data binding.
(ionChange)The event emitted when the value has changed.

When the Item Wrapped property is set to True, the component will be included in the Item with additional properties:

Property NameProperty Description
Item WrapperIf the item wrapper features are used, the toggle will be wrapped in the ion-item tag.
Color - item wrapper Ionic 5 color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Lines - define how the bottom border should be displayed on the item. Available options are Full, Inset or None.
LabelIf label is used, the input will be wrapped in the <ion-item> tag.
Text - the displayed label text.
Position - determines where and how the label behaves inside an item. The possible values are Fixed, Stacked or Floating.
Color - label Ionic color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name.
Internationalization- if set to True then use the Label Text property for internationalization.
ReorderType - if set to Wrapper, the item will be wrapped into a reorder tag.
Icon - custom icon for reorder with a type Content. Click the Default icon button to select the needed icon.
Custom 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.

Styles Properties

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

Property NameProperty Description
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
HandleToggle handle properties:
Border Radius - border radius of the toggle handle in px, %, em, vh, and vw.
Color - select background color of the toggle handle from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Color Checked - select background color of the toggle handle when checked from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Handle Width in px, %, em, vh, and vw
Max Height in px, %, em, vh, and vw.
Spacing - horizontal spacing around the toggle handle in px, %, em, vh, and vw.
TrackToggle track properties:
Border Radius - border radius of the toggle track in px, %, em, vh, and vw
Color - select background color of the toggle track from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
Color Checked - select background color of the toggle track when checked from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.

Visit the Ionic documentation to read more about Ionic 5 Toggle.

Toolbar

The Toolbar component contains a Toolbar Title and a Toolbar Buttons components.

πŸ“˜

By default, any new page is created with its Header and Footer that, in their turn, contain the following child components: Toolbar, Toolbar Title, and Toolbar Buttons.
Check this section below to learn more about the Header and Footer components.

Toolbars are positioned above or below content. When a toolbar is placed in an <ion-header> it will appear fixed at the top of the content, and when it is in an <ion-footer> it will appear fixed at the bottom. The fullscreen content will scroll behind a toolbar in a header or footer. When placed within an <ion-content>, toolbars will scroll with the content.

Properties

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

Styles Properties

Property NameProperty Description
Toolbar ColorSelect the color of the toolbar from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
MarginSet the margin area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.
PaddingSet the padding area of an element in px, %, em, vh, and vw: All sides, Top, Right, Bottom, Left.

🚧

Ionic 4 > Ionic 5 Migration: Breaking Changes!

Toolbar styles can impact the styles of the nested components so be informed that the following might require you to make changes to your application in order to avoid disruption to your integration.

Visit the Ionic documentation to read more about Ionic 5 Toolbar.

Toolbar Title

The Toolbar Title component has the following properties:

Common Properties

Property NameProperty Description
TextToolbar title text.
Text InternationalizationIf set to True then use the Text property for internationalization.

Styles Properties

Property NameProperty Description
Toolbar Title ColorSelect the color of the toolbar title from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker.
SizeToolbar title size: Small or Large.

Toolbar Buttons

To add a new Toolbar Buttons section, click the + button inside the Toolbar:

880

The Toolbar Buttons component is a container element. The buttons placed in a toolbar should be placed inside of the <ion-buttons> element.

The <ion-buttons> element can be positioned inside of the toolbar using a named slot.
The Toolbar Buttons component has the following properties:

Property NameProperty Description
SlotThe position inside the toolbar (Start (default), End, Primary or Secondary).
CollapseIf set to True, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in IOS mode with Collapse set to True on ion-header.

Visit the Ionic documentation to read more about Ionic 5 Toolbar Buttons.

Use the property Menu Button to add or remove a menu button (added by dragging & dropping the Button component to the Toolbar Button) into the Toolbar.