Using the Ionic Framework UI Elements


Ionic has many useable UI elements, including lists, buttons, forms and form elements, and so on. Ionic is both a CSS framework and a Javascript UI library. You can use them as is in your HTML. In this article, I’ll show you how to incorporate these elements as straight HTML code. I won’t be going into the more high-end, dynamic aspects of the Ionic framework in this article.

This tutorial assumes you already have installed:
node.js (http://nodejs.org/)
Cordova PhoneGap (http://www.phonegap.com)

This tutorial assumes you:
1. Know how to set up Android and iOS SDKs for development, and setting PATH statements. See my other articles on how to do this.
2. Have created several basic Cordova PhoneGap projects, including adding InAppBrowser plugin and making config.xml changes for it.

Ionic resources:
http://ionicframework.com/getting-started/
http://forum.ionicframework.com/
http://ionicframework.com/docs/api/
http://learn.ionicframework.com/

Angularjs resources:
http://www.thinkster.io/angularjs/GtaQ0oMGIl
https://angularjs.org/

Set Up the Environment

1. Visit http://ionicframework.com and download the beta.

2. Open the Terminal app. Install Ionic in Terminal with:

npm install -g cordova ionic

3. Starting from within the folder which will host the files (such as /IonicApps), type the following to create an app called myApp:

ionic start myApp blank

/IonicApps/myApp folder has been created. Double-click to open the readme file. It’ll tell you how to update the framework, and includes a tip on using Sass.

4. Ionic apps are based on Cordova, so we can use the familiar Cordova commands to build, test, and deploy our apps. So, cd to your app folder then create one or two platforms:

cd myApp
ionic platform add ios
ionic platform add android

5. Open the Ionic folder in /Downloads. Copy the /css, /fonts, and /js folders over to the /myApp/www folder, overwriting the existing folders of the same name.

6. Open /myApp/www/index.html and replace it with the following. This references the ionicicons.min.css, cordova.js, ionic.bundle.js files, which you incorporated in step 5:

<!DOCTYPE html>
<html>
<head>
<title>Ionic Framework</title>
<link rel="stylesheet" href="css/ionicons.min.css" />
 <link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
 }
</script>
<script src="js/ionic.bundle.js"></script>
 <script> 
 
<!-- more Ionic code will go here -->
 
 </script>
 
</head>
<body ng-app="ionicApp">
<!-- your header and footer will go here -->
 
 <script> 
 
<!-- your page states will go here -->
 
 </script>
</body>
</html>

The bottom of this article gives the entire index.html contents for this tutorial. However, it won’t display correctly on your web browser unless the above steps have been implemented first. The following are screen grabs of what the index.html will display.

myApp-buttons myApp-grids myApp-home myApp-lists

Set Up for Single-Page Architecture

1. Ionic uses the single-page architecture (SPA) format. All HTML content, therefore, will be on one page: index.html. In the <script> tags in the <head> will be placed the router that processes the page architecture. Add the router script:

<!-- more Ionic code will go here -->
 var app = angular.module('ionicApp', ['ionic'])
 
// set up the default router and load the template
 app.config(function($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise('/')

2. Each page is a “state” with its own html name, in my case, home.html, button.html, list.html, and grid.html. I’m using four “pages” for this app to demonstrate the various features one can use from Ionic. Here are is how the states are coded, right after the lines in step 1:

$stateProvider
 .state('home', { 
 url: '/',
 templateUrl: 'home.html'
 })
 .state('button', { 
 url: '/',
 templateUrl: 'button.html'
 })
 .state('list', { 
 url: '/',
 templateUrl: 'list.html'
 })
 .state('grid', { 
 url: '/',
 templateUrl: 'grid.html'
 })
 })
 </script>

Whenever I reference “home.html” in an internal link, the above scripting will know to display the id=”home” page state content. More on this in “Create a Page State” below.

3. Ionic considers this collection of page states to be an app, so it designates it as “ng-app” for the body. We’ll use a top navigation bar, which will be seen across all pages, with a title area and Home and Back buttons. We’ll place it outside any of the states so they’ll appear across all pages. The title will change to reflect that page’s title. The Back button will appear only on pages other than the Home page. I included a few comments for the lines.

Start the <body> content like this:

<body ng-app="ionicApp">
<!--navigation bar -->
 <ion-nav-bar class="bar-dark nav-title-slide-ios7"> <!-- works across pages -->
 <a ui-sref="home"> <button class="button icon-left ion-home">Home</button></a>
 <ion-nav-back-button class="button-clear"><!-- provides back button only where needed -->
 &nbsp;<i class="ion-arrow-left-c"></i> Back <!-- back button with left arrow -->
 </ion-nav-back-button>
 </ion-nav-bar>

4. Now let’s do the sticky footer. It will include three grouped buttons that will link to the interior page states. They are enclosed in a div with the “button-bar” class. They will stretch responsively across the bottom of the screen.

To style the buttons when they link to interior pages, this syntax is used: <a ui-sref=”button”, where we’ve already set the state’s name as button.html in the .state scripting above in “Setting Up.” Again, this is outside all the state coding so it appears across all pages. Place it immediately after the above nav bar code of step 3.

<!-- Footer -->
 <div class="bar bar-footer bar-dark"><!-- placed here, footer sticks to all pages -->
<!-- three grouped buttons --> 
 <div class="button-bar" style="padding-bottom: 4em;">
 <a ui-sref="button" class="button">Cards & Buttons</a>
 <a ui-sref="list" class="button">List</a>
 <a ui-sref="grid" class="button">Grid</a>
 </div>
 </div>
<ion-nav-view></ion-nav-view>

I am using the footer to navigate among three pages and the top nav bar to bring us back to the home page and to display each page’s title. With more pages, though, we would use a button list, perhaps with icons or thumbnails instead.

Create a Page State

Now let’s start setting up a page state. We’ll start by delineating the page between two <script> tags, identifying the state name (home.html), and that it is an ng-template. We’ll set up the page as a view with ion-view, and place our content within ion-content. We’ll want padding around the screen for our content, so we need to manually add padding=”true” to the ion-content tag.

1. Add this content for the page state after the footer code in the earlier section:

<script id='home.html' type='text/ng-template'> <!-- start of page state -->
 <ion-view title="Forms & Inputs"> <!-- title in nav bar -->
 <ion-content padding="true"> <!-- Adds default padding. Must add manually. -->
<div class="spacer"></div><!-- I added this because the footer covers up the lower part of the view. -->
 </ion-content>
 </ion-view>
 </script> <!-- end of page state -->

2. I noticed that the bottom content in the views were covered by the footer, so I added a div spacer to add space and push the content higher. Add this styling to the div spacer above the </head> line:

<style type="text/css">
 .spacer {padding-top:3em;}
.col {margin:2px; background-color:#ddd;}
 </style>

3. You can go ahead and double-click on /www/index.html to view the app so far.

From this point on:
a) We duplicate step 2 for each page we want to link to.
b) We change “home.html” to the new page name.
c) We update the .state scripting at top so that every time we apply the internal link of <a ui-sref=name.html our scripting at top will know to show the correct page state.

You’ll want to incorporate the InAppBrowser if you want to keep the external links in-app. This means styling the button for the IAB, such as:

<button class="button button-block button-stable" onclick="window.open('http://ionicframework.com/docs/components/#forms','_blank');">Button Text Goes Here</button>

Buttons that link to internal page states are coded as:

<button class="button button-block button-stable" onclick='window.open('ui-sref="home")'>Button Text Goes Here</button>

You’ll use the familiar cordova plugin add org.apache.cordova.inappbrowser in Terminal and add the appropriate lines for your platform in config.xml.

Ionic has an entire coding section using Angularjs that makes the pages dynamic and prevents code repetition. (See some tutorials here: http://learn.ionicframework.com/formulas/ .) We haven’t implemented any of that here, nor have we set up any of the form elements for working. This is just to show off the UI of the Ionic Framework. The following components were copied/pasted from http://ionicframework.com/docs/components/ and put in their proper arrangement for showing off. Each page will give the URL of the section so you can explore more of the options available.

Here is the full and complete scripting for the entire index.html page with several different components already added. I’ve included comments throughout to help you understand what’s happening under the hood. View this in your browser and click the buttons at the top of each page state to read more about the options for that section. If you make changes to the code, the browser needs to be refreshed to see them.

<!DOCTYPE html>
<html>
<head>
<title>Ionic Framework</title>
<link rel="stylesheet" href="css/ionicons.min.css" />
 <link rel="stylesheet" href="css/ionic.css" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
 }
</script>
<!-- IAB syntax: <button><a href="#" onclick="window.open('https://iphonedevlog.wordpress.com','_blank');">IAB with location bar (showing URL)</a> 
 </button> -->
 <script src="js/ionic.bundle.js"></script>
 <script>
 var app = angular.module('ionicApp', ['ionic'])
 
// set up the default router and load the template
 app.config(function($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise('/')
 
// Each $stateProvider sets up a single page with its own URL in a single-page arch. layout.
 $stateProvider
 .state('home', { 
 url: '/',
 templateUrl: 'home.html'
 })
 .state('button', { 
 url: '/',
 templateUrl: 'button.html'
 })
 .state('list', { 
 url: '/',
 templateUrl: 'list.html'
 })
 .state('grid', { 
 url: '/',
 templateUrl: 'grid.html'
 })
 })
 </script>
 <style type="text/css">
 .spacer {padding-top:3em;}
 .col {margin:2px; background-color:#ddd;}
 </style>
 
</head>
<body ng-app="ionicApp">
<!--navigation bar -->
 <ion-nav-bar class="bar-dark nav-title-slide-ios7"> <!-- works across pages -->
 <a ui-sref="home"> <button class="button icon-left ion-home">Home</button></a>
 <ion-nav-back-button class="button-clear"><!-- provides back button only where needed -->
 &nbsp;<i class="ion-arrow-left-c"></i> Back
 </ion-nav-back-button>
 </ion-nav-bar>
<!-- Footer -->
 <div class="bar bar-footer bar-dark"><!-- placed here, footer sticks to all pages -->
<!-- three grouped buttons --> 
 <div class="button-bar" style="padding-bottom: 4em;">
 <a ui-sref="button" class="button">Cards & Buttons</a>
 <a ui-sref="list" class="button">List</a>
 <a ui-sref="grid" class="button">Grid</a>
 </div>
 </div>
<ion-nav-view></ion-nav-view>

<script id='home.html' type='text/ng-template'><!-- forms a single-page architecture page called home.html. So all internal links to home.html will end here. -->
 <ion-view title="Home Page"> <!-- title of nav bar -->
 <ion-content padding="true"> <!-- Adds default padding. Must add manually. -->
 <h3>Forms & Inputs</h3> 
<button class="button button-block button-stable" onclick="window.open('http://ionicframework.com/docs/components/#forms','_blank');">More about Ionic Form & Inputs</button>
<button class="button button-block button-stable" onclick="window.open('http://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and-forms.html','_blank');">Processing Forms with JavaScript</button> 
 
 <ul class="list">
 <li class="item item-toggle">
 Toggle On or Off <!-- text goes OUTSIDE the label div -->
 <label class="toggle toggle-assertive"> 
 <input type="checkbox" id="toggleOn" value="toggleOn">
 <div class="track">
 <div class="handle"></div>
 </div>
 </label>
 </li>
 </ul>
 
 <ul class="list">
 <li class="item item-checkbox">
 <label class="checkbox">
 <input type="checkbox" value="checkbox1">
 </label>
 Checkbox 1 <!-- text goes OUTSIDE the label div -->
 </li>
</label> 
 <li class="item item-checkbox">
 <label class="checkbox">
 <input type="checkbox" value="checkbox2">
 </label>
 Checkbox 2 <!-- text goes OUTSIDE the label div -->
 </li>
 </ul>
<div class="list">
 <label class="item item-radio">
 <input type="radio" name="group1" value="radio1">
 <div class="item-content">
 Radio Button 1
 </div>
 <i class="radio-icon ion-checkmark"></i>
 </label>
<label class="item item-radio">
 <input type="radio" name="group1" value="radio2">
 <div class="item-content">
 Radio Button 2
 </div>
 <i class="radio-icon ion-checkmark"></i>
 </label>
</div>
</form>
<h3>Range Elements</h3>
<div class="range">
 <i class="icon ion-volume-low"></i>
 <input type="range" name="volume">
 <i class="icon ion-volume-high"></i>
</div>
<div class="list">
 <div class="item range range-positive">
 <i class="icon ion-ios7-sunny-outline"></i>
 <input type="range" name="volume" min="0" max="100" value="33">
 <i class="icon ion-ios7-sunny"></i>
 </div>
</div>
<h3>Drop-down Select List</h3>
<div class="list">
 <label class="item item-input item-select">
 <div class="input-label">
 Color Scheme - Select
 </div>
 <select id="select">
 <option value="blue">Blue</option>
 <option value="green" selected>Green</option>
 <option value="red">Red</option>
 </select>
 </label>
</div>
<h3>Forms</h3>
<form name="myForm" method="POST">
<div class="list">
 <label class="item item-input">
 <input type="text" name="myFormFirstName" placeholder="First Name">
 </label>
 <label class="item item-input">
 <input type="text" name="myFormLastName" placeholder="Last Name">
 </label>
 <label class="item item-input">
 <textarea name="myFormComments" placeholder="Comments - see source for other ways to style forms"></textarea>
 </label>
</div>
<h3>Add Input to a Header</h3>
<div class="bar bar-header item-input-inset">
 <label class="item-input-wrapper">
 <i class="icon ion-ios7-search placeholder-icon"></i>
 <input type="search" name="search" placeholder="Search">
 </label>
 <button class="button button-clear">
 Cancel
 </button>
</div>
<div class="spacer"></div><!-- I added this because the footer covers up the lower part of the view. -->
 </ion-content>
 </ion-view>
 </script>

<!-- ************************************ -->

<script id='button.html' type='text/ng-template'><!-- forms a single-page architecture page called button.html. -->
 <ion-view title="Buttons and Cards"><!-- name in header for this page -->
 <ion-content padding="true">
 <h2>Cards</h2>
<button class="button button-block button-stable" onclick="window.open('http://ionicframework.com/docs/components/#cards','_blank');">More about Ionic Cards</button>
 
 <div class="card">
 <div class="item item-divider">
 I'm a Header in a Card!
 </div>
 <div class="item item-text-wrap">
 This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text. This is a basic Card which contains an item that has wrapping text. 
 </div>
</div>
<div class="list card">
<div class="item item-divider">
 I'm a Header in a Card!
 </div>
 <div class="item item-avatar">
 <img src="http://www.teamassociated.com/pictures/cars_and_trucks/RC10B5/Team/RC10B5_TK_2560x2048_md.jpg">
 <h2>RC10B5</h2>
 <p>Great 1:10 buggy kit</p>
 </div>
<div class="item item-image">
 <img src="http://www.teamassociated.com/pictures/cars_and_trucks/RC10B5/Team/RC10B5_TK_2560x2048_md.jpg" style="max-width:350px;">
 </div>
<!-- Icon doesn't show: Need to first download icons at http://ionicons.com/ -->
 <a class="item item-icon-left assertive" href="#">
 <i class="icon ion-ios-heart"></i>
 Go get one!
 </a>
</div>

<h2>Buttons</h2>
<p>Format a working button like this for external links that open in the InAppBrowser (must install IAB with <span style="font-family:Courier;color:#666">cordova plugin add org.apache.cordova.inappbrowser</span> and update config.xml): 
 <span style="font-family:Courier;color:#666">&lt;button class="button" onclick="window.open('http://www.rc10.com/','_blank');">Button Text Goes Here&lt;/button></span></p>
 <p>For internal links: <span style="font-family:Courier;color:#666">&lt;button class="button button-block button-stable" onclick='window.open('ui-sref="home")'>Button Text Goes Here&lt;/button></span></p>
<button class="button button-stable button-block" onclick="window.open('http://ionicframework.com/docs/components/#buttons','_blank');">More about Ionic Buttons</button>
<br><button class="button button-positive">
 Different colored buttons
 </button>
 <button class="button button-block button-stable" onclick='window.open('ui-sref="home")'>block button</button>
 <h3>Different Size Buttons</h3>
 <button class="button button-small button-assertive">
 Small Button
 </button>
 <br><button class="button button-large button-positive">
 Large Button
 </button>
 <h3>Buttons with Icons</h3>
 <button class="button">
 <i class="icon ion-loading-c"></i> Loading...
 </button>
 <br><button class="button icon-left ion-home">Home</button>
 <br><button class="button icon-left ion-star button-positive">Favorites</button>
 <br><a class="button icon-right ion-chevron-right button-calm">Learn More</a>
 <br><a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
 <br><button class="button icon ion-gear-a"></button>
 <br><a class="button button-icon icon ion-settings"></a>
 <br><a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
 <h3>Button Bar</h3>
 <div class="button-bar">
 <a ui-sref="home" class="button">First</a>
 <a ui-sref="list" class="button">Second</a>
 <a ui-sref="grid" class="button">Third</a>
 </div>
 <div class="spacer"></div><!-- I added this because the footer covers up the lower part of the view. -->
 </ion-content>
 </ion-view>
 </script><
<!-- ************************************ -->
<script id='list.html' type='text/ng-template'><!-- forms a single-page architecture page -->
 <ion-view title="List Page"><!-- name in header for this page -->
 <ion-content padding="true"><!-- manually add padding to view -->
 <h3>Here's a list page</h3>
<button class="button button-stable button-block" onclick="window.open('http://ionicframework.com/docs/components/#list','_blank');">More about Ionic Lists</button>
 <div class="item item-divider">Timothy Zahn Star Wars books</div>
 <ul class="list">
 <li class="item">Heir to the Empire (Thrawn trilogy), vol 1</li>
 <li class="item">Dark Force Rising (Thrawn trilogy), vol 2</li>
 <li class="item">The Last Command (Thrawn trilogy), vol 3</li>
 <li class="item">Vision of the Future (duology), vol 1</li>
 <li class="item">Specter of the Past (duology), vol 2</li>
 </ul>
 </div>
 <h3> Add Icons</h3>
 <div class="list">
 <a class="item item-icon-left" href="#">
 <i class="icon ion-email"></i>
 Check mail
 </a>
 <a class="item item-icon-left item-icon-right" href="#">
 <i class="icon ion-chatbubble-working"></i>
 Call Ma
 <i class="icon ion-ios7-telephone-outline"></i>
 </a>
 <a class="item item-icon-left" href="#">
 <i class="icon ion-mic-a"></i>
 Record album
 <span class="item-note">
 Grammy
 </span>
 </a>
 <a class="item item-icon-left" href="#">
 <i class="icon ion-person-stalker"></i>
 Friends
 <span class="badge badge-assertive">0</span>
 </a>
 </div>
 <h3> Add thumbnails</h3>
 <div class="list">
 <a class="item item-thumbnail-left" href="#">
 <img src="http://www.teamassociated.com/pictures/cars_and_trucks/RC10B5/Team/RC10B5_TK_2560x2048_md.jpg">
 <h2>1:10 Electric Buggy Kit</h2>
 <p>RC10B5</p>
 </a>
 <a class="item item-thumbnail-left" href="#">
 <img src="http://www.teamassociated.com/pictures/cars_and_trucks/SC10.2/Factory_Team/7038_md.jpg">
 <h2>1:10 Electric Truck Kit</h2>
 <p>SC10.2</p>
 </a>
 <a class="item item-thumbnail-left" href="#">
 <img src="http://www.teamassociated.com/pictures/cars_and_trucks/Pro_Rally_4WD/RTR/ProRally_3Q_hero_md.jpg">
 <h2>1:10 Electric Rally RTR</h2>
 <p>ProRally</p>
 </a>
 </div>
 <div class="spacer"></div><!-- I added this because the footer covers up the lower part of the view. -->
 </ion-content>
 </ion-view>
 </script>
<script id='grid.html' type='text/ng-template'><!-- forms a single-page architecture page -->
 <ion-view title="Grid Page"><!-- name in header for this page -->
 <ion-content padding="true">
 <h2>Grids</h2>
 <p>Note: Actual grids do not come styled.</p>
 <h3>Make these rows responsive</h3>
 <div class="row responsive-md">
 <div class="col">.col 1</div>
 <div class="col">.col 2</div>
 <div class="col">.col 3</div>
 <div class="col">.col 4</div>
 <div class="col">.col 5</div>
 </div>
 <h3>Specify by percentage</h3>
 <div class="row" responsive-md>
 <div class="col col-50">specify 50%</div><!-- 50 = 50& -->
 <div class="col">not specified</div>
 <div class="col">not specified</div>
 </div>
 <div class="row" responsive-md>
 <div class="col col-75">.col.col-75</div>
 <div class="col">.col</div>
 </div>
 <div class="row" responsive-md>
 <div class="col">.col</div>
 <div class="col col-75">.col.col-75</div>
 </div>
 <h3> Align rows at top</h3>
 <div class="row row-top">
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">1<br>2<br>3<br>4</div>
 </div>
 <h3> Align rows at center</h3>
 <div class="row row-center">
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">1<br>2<br>3<br>4</div>
 </div>
 <h3> Align rows at bottom</h3>
 <div class="row row-bottom">
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">.col</div>
 <div class="col">1<br>2<br>3<br>4</div>
 </div>
 <div class="spacer"></div><!-- I added this because the footer covers up the lower part of the view. -->
 </ion-content>
 </ion-view>
 </script>
 </body>
 lt;/html>

One thought on “Using the Ionic Framework UI Elements

  1. The various UI components that are employed in Ionic are usually Angular JS Directives. Additionally, the framework also use the delegates in order to get control over the UI elements along with a Ui Router having the multiple histories.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s