If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

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

You’ll find the Ionic UI components here.

Here’s an empty index screen that opens when you create a new app:

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.

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.

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.

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

Here, how it should look like:

NgView

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

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.
  • Atttribute name – a new attribute value.

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

By default, Side Menus are hidden under the Content area. To open the Side Menu, swipe the content side to side.

The Side Menu has the following properties:

  • Is Enabled – determines if an option is enabled.
  • Side – right, left.
  • Width.

Also, two side-menu specific directives (menuToggle and menuClose) can be added to the list of other components’ scopes. They are automatically removed from the list with the removal of the side menu.

How it works:

  • Go to the index screen and, in DESIGN view, select true for the Side Menu property. A Side menu will appear in the builder.
  • Drag a Button to the Header Button outside the Side menu and, for its Attribute name field, start typing “m” to call the autocomplete drop-down offering two directives: menu-toggle and menu-close.
  • Add the menu-toggle directive to enable opening the side menu on button click.
  • To open side menu on the right side, you should set menu-toggle = right.

Similarly, adding a Button component within the side menu area and passing menu-close as its Attribute name will enable closing the side menu by clicking this UI component.

Visit the Ionic documentation to read more about 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 Index page.
  • Show Header – display or hide header, initially adjusted on Index page.
  • Show Top Tabs – display or hide top tabs, initially adjusted on 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 contain 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 initialise function.

The screen also has a Content child component; the Header and the Footer are inherited from the index screen.

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

The are two scroll types that can be chosen for your ionContent page – native or JavaScript. 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.

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

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.

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.