a blog for those who code

Friday 2 October 2015

Page Structure of Ionic Apps

In this post we are going to discuss about the page structure of Ionic Apps. In our previous post we have discussed about the Getting Started with Ionic Framework in Visual Studio 2015 and What is Apache Cordova and Ionic Framework where we have learnt about the Ionic Framework and the connection between Apache Cordova and Ionic Framework. In this post we will mainly focus on the page structure of a Single Page Ionic Application.

Inside a body tag, you should see a structure like below, where entire page is wrapped around ion-pane directive. Ion-pane is a simple container that fits content, with no side effects. You can also add "pane" class to the element to make it an ion-pane container..

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content></ion-content>
</ion-pane>

Next is ion-header-bar directive which adds a fixed header bar above some content. As you can see there is a class attached to ion-header-bar which is bar-stable, you can change that according to your need. Ionic has different Utility Colors and for header bars they can be used as bar-light, bar-stable, bar-positive, bar-calm, bar-balanced, bar-energized, bar-assertive, bar-royal and bar dark as shown.

Next is ion-content directive which enables building content areas. It provides an easy to use content area that can be configured to use Ionic's custom scroll view, or the built in overflow scrolling of the browser.

Along with the above directives, to give complete structure to the page we are going to add a footer as well. Just before the closing tag of ion-pane directive we are going to add the below code. ion-footer-bar adds a fixed footer bar below below some content.

<ion-footer-bar class="bar-stable">
  <div class="title">Footer</div>
</ion-footer-bar>

Now when you run your application you will see the application as shown. The full page structure structure of your Single Page Ionic Application is :

<body ng-app="starter">
  <ion-pane>
    <ion-header-bar class="bar-stable">
    </ion-header-bar>
    <ion-content></ion-content>
    <ion-footer-bar class="bar-stable">
    </ion-footer-bar>
  </ion-pane>
</body>

Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment