Pages and Tabs

Ionic 4/5 screens (pages) and tabs available in the Visual App Builder

Introduction

A page is the basic building block of any app. Before you can start with building the page UI by adding UI components to it, you need to create the page: click CREATE NEW > Page (or select the needed page from the Pages list in the Project view if you already have some page to edit):

Every brand new Ionic 4/5 app has two default pages (screens):

👍

It is important to differentiate between these two types of the Page component for different pages types (check the Project view):

  • IndexScreen for app pages (there can be only one app page in a project) and
  • Page for Screen pages (numerous Screen pages can be created in a project).

The number of screens is plan-dependent, so check our Pricing table to learn how many screens can be created under your plan.

General Page (app/Screen) Overview

When you open the app page (or any other page), you will see the image of your device in the middle (the MOBILE FRAME), the components PALETTE (with the set of predefined UI components) to the left of it, and the PROPERTIES panel (an instrument for components customization) to the right:

Page layout can be portrait or landscape, screen size set to extra small, small, medium, large, or extra large, and the screen view switched between iPhone OS and Material Design. You can change the page working area by clicking the corresponding icon:

🚧

For the app page, the nested Content, Footer, and Header components are contained within the Menu component.

Index Screen

Being the container of the highest level for all app pages, IndexScreen is the construction element that manages the general app behavior (for example, add a split pane or a side menu to your app).
IndexScreen can be found under the app page only (check the Project view) and cannot be added to any other screen:

❗️

No PALETTE components can be added to IndexScreen.

Properties

The IndexScreen properties available for modifying are the following:

App Content Id

The App Content Id property is used to bind app content to the menu.

Menu

To create a side menu, select True.

Split Pane

Set to True to add a split pane to the project.
(Menu should also be set to True).
If set to False, the side pane will not be displayed.

👍

Video Tutorial: Adding Side Menu to Ionic 5 App

You can also check out this video guide for detailed instructions on how to add a side menu to your Ionic 5 application:

🚧

For correct work of the menu and split pane, Menu Content Id, Split Pane Content ID, and App Content Id of the app should have the same value.
Modifying these properties is recommended for experienced users only.

📘

The advanced attributes can be added for routing purposes including main app content.

Menu

To add a side menu to your app, set the IndexScreen Menu property to True.
The created Menu component contains Content, Menu Header and Menu Footer and has the following properties:

Property Name

Property Description

Content Id

The content's ID to be used in the menu.

Footer

If set to True, adds the footer to the menu.

Header

If set to True, adds the header to the menu.

Max Edge Start

The edge threshold for dragging the menu open. If a drag/swipe takes place over this value, the menu is not triggered.

Menu Id

The menu ID.

Side

What side of the view the menu should be placed to: Start or End.

Swipe Gesture

If set to true, the menu swiping is enabled.

Type

The display type of the menu.
Available options are Push, Reveal, Overlay.

(ionDidOpen)

Emitted when the menu is open.

(ionDidClose)

Emitted when the menu is closed.

The app page Menu component (activated if set to True under the IndexScreen PROPERTIES tab) offers three child components to be defined:

  • Content
  • Menu Header
  • Menu Footer.

These properties are similar to the Screen Page Content, Header and Footer components.

👍

Menu Header and Menu Footer (for the app page) become available if the Header and Footer properties are set to True under the IndexScreen PROPERTIES tab.
Similarly, Header and Footer (for Screen pages) become available if the Header and Footer properties are set to True under the Page PROPERTIES tab.

📘

Check this documentation link to learn how to create a simple Ionic 4 mobile application with a menu in Appery.io.

Besides, you can check this document to learn how to use Ionic 4 Side Menu Template in Appery.io.

You can also watch this Appery.io community video that shows how to add a menu to an Ionic 4 mobile application.

Split Pane

To add a split pane, set the IndexScreen Split Pane property to True.

🚧

The [IndexScreen Menu property](https://docs.appery.io/docs/screens-and-tabs#menu) should be also set to True to make the Split Pane accessible.

The Split Pane component has the following properties:

Property Name

Property Description

Content Id

The content's ID to be used in the menu.

When

Defines when the split pane should be shown.
From the drop-down, selecting from Ionic's predefined sizes is available: xs, sm, md, lg, and xl.
It can also be passed as a CSS media query expression or a shortcut expression. Using a boolean expression is also possible.

(ionSplitPaneVisible)

Expression to be called when the split pane visibility has changed.

Learn more about Split Pane and read on how to customize its When property here.

Pages (Screens)

The Page (Screen) component is the main container for other Ionic 4/5 UI components PALETTE and, in its turn, consists of three more Ionic components:

Header and Footer may be shown or hidden.
Content is the main part of the page where the components may be placed.

Properties

The Page component (for app Screen pages) has the following properties:

Property Name

Property Description

Footer

If set to True, the footer will be added to the page.

Header

If set to True, the header will be added to the page.

Modal Screen

If set to True, this page will be used as a modal page.

Tabs

If set to True, tabs will be added to the page

🚧

If you use Tabs, the properties Show Header and Show Footer become unavailable for this page. They can be set for each tab page individually.

Any Screen Page offers three child components to be defined:

Header and Footer (for Screen pages) become available if the Header and Footer properties are set to True under the Page PROPERTIES tab:

Similarly, Menu Header and Menu Footer (for the app page) become available if the Header and Footer properties are set to True under the IndexScreen PROPERTIES tab:

Content

Content is the main part of the page where all the UI components may be placed:

You can easily select and manage components added to the working area by using Breadcrumbs or the OUTLINE view:

The Content component has the following properties:

Property Name

Property Description

Force Overscroll

If set to true (with the content not triggering an overflow scroll), the scroll interaction will cause a bounce.

Fullscreen

If set to True, the content will scroll behind headers and footers.

Scroll Events

If set to true, ``ionScrollevents will be enabled and listening from(ionScroll)will start. Because of performance reasons,ionScroll``` events are disabled by default.

Scroll X

If set to true, the content scrolling will be enabled on the X-axis.

Scroll Y

Setting to false will disable the content scrolling on the Y-axis.

(ionScroll)

The event emitted while scrolling. This event is disabled by default.

🚧

In order to scroll content behind headers and footers, the Fullscreen attribute needs to be enabled for Content.

Check this link to read more about Content.

Header and Footer


The Header and Footer components have the following properties:

Property Name

Property Description

No Border

To remove the border, set to True. The default is set to False.

Translucent

If set to True, the footer will be translucent.

📘

By default, any new Screen page is created with its Header and Footer which, in their turn, contain the following nested components: Toolbar, Toolbar Title, and Toolbar Buttons.
Check this section of the document to learn more about the Toolbar component.

Tabs

Tabs are a top level navigation component to implement a tab-based navigation. The component is based on Ionic ion-tabs, ion-tab-bar and ion-tab-button components.

🚧

Setting the Page Modal Screen property to True will remove Tabs from the page.

Get Started

To add Tabs to your application, create a new screen page and set its Tabs property to True: the Tabs component with a Tab Bar (including a Tab Button) will be added to the screen.

🚧

If the Tabs property is set to True, all the existing components will be removed from the page.

In the Tabs mode, Tabs, Tab Bar and Tab Button components become available for editing. You can select any of them by clicking on each or use Breadcrumbs or the OUTLINE panel of the Visual editor.

Use the green + button on the selected Tab Bar if you need to add more Tab Button components.

Binding a page to every Tab Button is carried out with the Tab property of the button. The property contains a list of created pages where users can navigate to.

The created tabs will be displayed after navigating to the appropriate tabs page. For example, you can choose such a page with tabs as the default opening page on application loading under the Project > Routing tab.

Changing Tab Name in URL

If you need to have a special tab name in the URL, enter a new name to the Tab Path property of the Tab Button component. If the property isn't specified, the name of the screen will be used in the URL.

Navigation from Tabs to Child Pages

By default, created tab buttons won't be displayed after users' navigation from the current tab to other pages that are not bound to other tab buttons.
If you need to show tab buttons for such navigation, use the Tab Path property of the Tab Button component.
Suppose we have an app where we would like to define navigation using the Users tab button to the UserDetails page:

To do it, we'll need to define a child route for this button that has the following structure:

[{"path": "details", "screenName": "UserDetails"}]

In these cases, path is the name of the tab that will be used in the URL and screenName is the name of the page from the Project tree.

After child routes have been defined, drag and drop linking components (for example, a Button) from the PALETTE to the tab page navigation from which will be carried out (here, it is User page):

Please check how this routing works in an app:

You can also add an advanced attribute routerLink to the linking component clicking on that will be clicked on to navigate to a child page. Pass the path of the created child route as the value of the attribute (routerLink=UserDetails).

As a result, after clicking on the linking component, navigation will take place and tab buttons will be kept on the page.

📘

If you use Tabs, properties Show Header and Show Footer will become unavailable for this page. They can be set for each tab page individually.

Properties

The Tabs component has the following properties:

Property Name

Property Description

(ionTabsDidChange)

The event emitted when the navigation has finished transitioning to a new page.

(ionTabsWillChange)

The event emitted when the navigation is about to transition to a new page.

Read more about Tabs here.

Tab Bar

The Tab Bar component has the following properties:

Property Name

Property Description

Selected Tab

The selected tab by default.

Slot

Tab Bar position relative to the screen: Top or Bottom.

Translucent

If set to True, the Tab Bar will be translucent. It only applies when the Mode is iOS and the device supports backdrop-filter.

📘

You can check this document to learn how to use Ionic 4 Tabs Template in Appery.io.

Tab Button

To add a new Tab Button, click the green + button on the Tab Bar.
The Tab Button component has the following properties:

Property Name

Property Description

Badge

Adds a badge to the Tab Button.
Class - defines equal styles for elements with the same class name.
Text - the displayed text of the badge.

Class

Defines equal styles for elements with the same class name.

Href

It contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Icon

Adds an icon to the Tab Button.
Class - defines equal styles for elements with the same class name.
Name - allows changing Ionic 4 icon style dynamically by property binding to [name]. You can use string (Ionic 4 Icon name e.g. star') or variable name.
Style - click the No icon button to select from default Ionic 4 icons.
Label - adds a label to the Tab Button.
Mode - determines which platform styles to use. Possible values are iOS or MD.

Label

Adds a label to the Tab Button.

Layout

Sets the layout of the text and icon in the tab bar.
Possible values are Icon Bottom, Icon End, Icon Hide, Icon Start, Icon Top, Label Hide. The defaults are set to Icon Top.

Selected

Makes the tab selected.

Tab

A tab id must be provided for each tab button. It is used internally to reference the selected tab or by the router to switch between them.

Tab Child Routes

A list of child routes to set internal navigation of the tab.

[
  {"path": "screen2", "screenName": "Screen2"},
  {"path": "screen3", "screenName": "Screen3"},
  ...
]

Tab Path

The URL path for this tab. If not set, the screen name will be used.

🚧

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.

Check this Ionic documentation for more information.