Introduction

There are a blank screen, a screen with content, an index screen, and a modal screen in Ionic/AngularJS projects.

Index Screen

The index screen has the following specific properties:

• Controls Bottom:
  • Footer – enables footer.
  • Tabs – enables tabs.
• Controls Top:
  • Header – enables header.
  • Tabs – enables tabs.
• Side Menu – enables showing the side menu when set to true.
• ng-init – calls initialize function.

📘

Tip

If the Tabs, Header, and Footer parameters are set to false, all the settings and included components will be cleared.
Reverting this parameter to true will not revert the button, so it should be reverted manually.

Setting Tabs (Controls Bottom/ Controls top) to true automatically adds two default TabsItems (more TabsItems can be added by clicking + with selected Tab) where Icons can be added.
The index screen has three child components: Header, NGView, and Footer.

Index Screen Header

Header is a fixed component at the top of a screen containing a title label and two Сontainers.
Visit the Ionic documentation to read more about Headers.

The Header has the following properties:

• Color – light, stable, positive, calm, balanced, energized, assertive, royal, dark.
• Scroll On Tap – enables scroll when tap.
• Text – text content.
• ng-show – an action that happens when displayed.
• Attribute name – a new attribute value.

📘

Headers

The Header Containers can be used for adding Button or Input components.

Header Containers with Input

The Header Containers can be used for adding Button or Input components. This is how you can add an Input and a Button component to the Header Containers:

1. Drag & drop an Input to the left Header Container.
2. To choose an Icon for the Input, click No icon for Style and select ion-search.
3. Drop a Button to the right Header Container, enter Search *for Text, and select Clear for Style.

NgView

NgView is the container for rendering current route templates. Only one instance of NgView is allowed in the project and cannot be deleted.

Index Screen Footer

Footer is a component at the bottom of a screen that can contain various types of content, for example, a copyright notice, navigation buttons, or contact information.
Visit the Ionic documentation to read more about Footers.
The Footer has the following properties:

• Color – light, stable, positive, calm, balanced, energized, assertive, royal, dark.
• Text – text content.
• ng-show – an action that happens when displayed.
• Attribute name – a new attribute value.

Index Screen Controls

There are Top Tabs in the header and Bottom Tabs in the footer.
The Tabs have the following properties:

• Color – light, stable, positive, calm, balanced, energized, assertive, royal, dark.
• Tabs Style – icons left, icons only, icons top, default.
• ng-show – an action that happens when displayed.

The Tabsitem has the following properties:

• Text – a text heading.
• ng-click – an action when clicked.

Side Menu

Side Menu is a UI element that opens in the right or left side of your app, when you swipe or drag the main content area aside.

To enable Side Menu:

1. Go to the index screen
2. Locate the Side Menu property and set it to true.

📘

Note

Setting it to false will delete Side Menu. To hide or show it, use the Outline view.

Side Menu properties:

• Is Enabled – true by default. Takes Angular expression, determines if Side Menu is enabled on different screens (via binding index scope variable, see example below).
• Side – left(default), right.
• Width - custom width.

Additionally, the Side Menu can be opened and closed by calling the following directives from other components:

• menuToggle - toggles the Side Menu on the given side. If the Side Menu is on the right, you should set menu-toggle to right.
• menuClose - closes the currently opened Side Menu.
  Learn more how to use the directives.

📘

Tip

You can drop any component into the Side Menu but it's designed for navigation(see use cases below).

More Examples

This section shows more examples using the Side Menu.

Placing a Button in the header to open/hide side menu:

1. If the Side Menu is open, hide it (implies Side Menu is enabled in index page).
2. Drag a Button on to the Header.
3. Add attribute directive: start typing m to call the autocomplete drop-down offering two directives: menu-toggle and menu-close, select the menu-toggle directive to enable opening the side menu on button click.

To use the Side Menu for navigation:

1. Add the desired number of screens to the app. If Side Menu is closed open it (implies side menu is enabled in index screen). Drop the List component into the Side Menu, change the number of items according to screens available for navigation.
2. Add the navigate-to directive to list items with the name of the appropriate routes.

To disable the Side Menu on some screens there are two options:

1. Add a variable to the index screen scope. Example: $scope.sideMenu.isEnabled set it to true/false value on each screen.
2. Alternatively, if you have a lot of screens, you can do it via directive activeScreen: see Ionic Side Menu Template or Ionic Component Examples for this implementation

To close a Side Menu after a tap on it:

1. Add menu-close directive to elements in the side menu(or directly to side menu).

Page Templates

In Ionic, you have the ability to create pages from two different templates. They are Blank Ionic Page and Ionic page with content.
The templates are chosen during new page creation.

Blank Ionic Page

This is a simple Ionic page, you would use this when you do not require special scroll configurations. A blank page uses the native scroll, which can be buggy in iOS so you may prefer to use the page with ionContent as it uses JavaScript scroll, which is ideal for targeting iOS devices. As the blank page doesn’t contain a child scope, two-way binding can be performed without the need to wrap variables with objects. You can read more about scope variables in Ionic here.

The Blank Ionic Page has the following properties:

• Padding – add class padding, which in turn adds a 10px padding to the page.
• Show Bottom Tabs – display or hide bottom tabs, initially adjusted on Index page.
• Show Footer – display or hide footer, initially adjusted on the Index page.
• Show Header – display or hide header, initially adjusted on the Index page.
• Show Top Tabs – display or hide top tabs, initially adjusted on the Index page.

Page with IonContent

This is a multi-tool page with an ion-content directive, in which several settings have been provided by Ionic. You would use this if you need configurable page scrolling. A page with ionContent contains its own child scope, so all variables binding should be performed via the object. Read more about scope variables in Ionic here.

It has a default built-in scroll, meaning that everything dropped onto the page can be scrolled through. For example, if you place several components on the page, making sure that the content takes up more than a page in height, and test the app, you will find that the content is scrollable.

The Ionic page with content has the following properties:

• Show Bottom Tabs – displays index screen bottom tabs.
• Show Footer – displays index screen footer.
• Show Header – displays index screen header.
• Show Top Tabs – displays index screen top tabs.
• ng-init – calls initialize function.
  The screen also has a Content child component; the Header and the Footer are inherited from the index screen.

Content

The Content area is the scrollable viewport for your app. While your headers and footers are fixed, the Content fills the remaining available space.
Visit the Ionic documentation to read more about Content.

The Content has the following properties:

• Delegate Handle – the handle used to identify the scroll view by using the ionicScrollDelegate method. See here how to use it.
• Direction – which way to scroll (x, y, xy).
• Has Bouncing – enables scrolling to bounce past the edges of the content (auto, true, false).
• Locking – locks scrolling in one direction at a time.
• On Scroll – an action when the content is scrolled.
• On Scroll Complete – an action which a scroll action completes.
• Overflow Scroll – defines scroll type.
• Padding – enables padding of the content.
• Scroll – enables scrolling.
• Scroll Event Interval – number of milliseconds between each firing of the ‘on-scroll’ expression.
• Scrollbar-x – enables the horizontal scrollbar.
• Scrollbar-y – enables the vertical scrollbar.
• Start-x – initial horizontal scroll position.
• Start-y – initial vertical scroll position.
  To get more scrolling options you can add a Scroll component to your app.

Scroll Types

There are two scroll types that can be chosen for your ionContent page – native or JavaScript. The native scroll can be buggy on an iOS device, so we recommend choosing a JavaScript scroll if you are targeting iOS devices. The type can be configured via the Overflow Scroll property, which can be set to Default, True, and False parameters, however for iOS and Android it works differently:

• iOS:
  • Default – JavaScript
  • True – native
  • False – JavaScript
• Android:
  • Default – native
  • True – native
  • False – JavaScript
    So depending on your chosen parameter for the Overflow Scroll a different scroll type will be used.

Modal Screen

Visit the Ionic documentation to read more about Modal.

Creating a Modal Screen

To create a Modal screen, click Project view > Create New > Modal.
In the opened window, enter a new Modal name and select the template.

A Modal screen has the following properties:

• Has Footer – enables footer.
• Has Header – enables header.

The modal screen has three child components: Header, Content and Footer.

Opening a Modal

You can use a predefined snippet to open the modal:

1. Go to SCOPE, open any function, and click on the arrow next to Insert snippet: a snippets list will appear in the drop-down.
2. Select Open modal page to generate the modal opening code.
3. Change modal_name to your modal name (you can use CTRL+SPACE to autocomplete the modal name), for example:

Apperyio.get('Modals').loadModal("Modal1").then(...

4. Now, you can invoke this function when you need (on button click, for example).
5. There is also modalOptions object to configure the modal. You can find all the available options for Ionic modal here.

📘

Using Drag-and-Drop

Drag and drop a Modal screen from the project tree into the Scope function field

Modal Screen Samples

Using Modal screen code samples.

• How to pass data to a Modal screen.

Header

Visit the Ionic documentation to read more about Headers.
The Header has the following properties:

• Color – light, stable, positive, calm, balanced, energized, assertive, royal, dark.
• Scroll On Tap – enables scroll when tapped.
• Text – text content.

📘

Note

When a new Modal is created, there is a default close button in the Header with modal.hide() action in a click handler. If necessary, the button can be modified under PROPERTIES, cloned, copied, or deleted.

Content

The Content has the following properties:

• Delegate Handle – the handle used to identify the scroll view by using ionicScrollDelegate method.
• Direction – which way to scroll (x, y, xy).
• Has Bouncing – enables scrolling to bounce past the edges of the content (auto, true, false).
• Locking – locks scrolling in one direction at a time.
• On Scroll – an action when the content is scrolled.
• On Scroll Complete – an action when a scroll action completes.
• Overflow Scroll – defines scroll type.
• Padding – enables padding of the content.
• Scroll – enables scrolling.
• Scroll Event Interval – number of milliseconds between each firing of the on-scroll expression.
• Scrollbar-x – enables the horizontal scrollbar.
• Scrollbar-y – enables the vertical scrollbar.
• Start-x – initial horizontal scroll position.
• Start-y – initial vertical scroll position.

Footer

Visit the Ionic documentation to read more about Footers.
The Footer has the following properties:

• Color – light, stable, positive, calm, balanced, energized, assertive, royal, dark.
• Text – text content.

Adjusting Screen Content to iOS Status Bar

You can select if your app will be shown with iOS status bar or without. In some cases status bar may overlap the app controls. There is no way to automatically add padding if status bar is shown and remove padding when there is no status bar. But we suggest a few fays to fix that:

Ionic App

To avoid adding extra padding when there is no status bar, add Angular module (Create JavaScript - Angular module) with code:

define(['require', 'angular'], function(require, angular) {
    var module = angular.module('addFullscreen', ['ionic']);
    module.run(function() {
        if (ionic.Platform.isIOS()) {
            ionic.Platform.fullScreen(true);
        }
    });
});

Here, addFullscreen is your module name.

Side effect of this approach is that padding will be added during app start and disappear in a moment, so there will be a barely notisable content jump.

If this is not acceptable, there is another solution, add JavaScrips file with the following code:

define( [ 'require' ], function( require ){
    document.body.classList.add("fullscreen")
});

Bootstrap App

In order to add padding to avoid overlapping content with status bar, simply add padding to Body with CSS like this:

body {
    padding-top: 20px;
}