[转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

本文转自：http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/

Ionic is both a CSS framework as well as a JavaScript UI library. If you’re an AngularJS developer you will be right at home as Ionic uses AngularJS Extensions via directives to provide user interactions, gestures, animations and more. It follows a View Controller pattern where their built-in Controllers handle the UI interaction with the view.

You don’t have to use the AngularJS extensions to take advantage of Ionic, you can also use the CSS alone which includes a bunch of UI components including tabs, buttons, headers, footers, lists and and others as well.

What Does it Include?

A comprehensive set of UI Components – tabs, headers, navigation, modal, toggle, checkbox, radio, action sheet, loading, slide boxes, cards, range etc.

Icon Pack – Ionic has a large set of icons to be used with your mobile apps easily, including some animated ones.

View Stacks / State Management – Ionic has built-in state management for your views to keep track of navigation history. It gives you the ability to push more than one template into a page at one time as well as push data to a view.

Automatic Transitions based on History – Ionic will transition views to slide left and right automatically based on history.

Gestures – Ionic incorporates the popular Hammer.js to provide gesture support for things like tap, swipe, drag etc.

UI Interaction Handling – via AngularJS extensions (ie: handling when a tab is clicked, shown or hidden).

Side Menus (Slide out) – built-in support for side menus to be toggled when the menu icon is clicked and slide into view.

Pull to Refresh – you can easily add pull to refresh capabilities to your scroll area that includes a default icon and animation.

Infinite Scroll – an example of how to use it is included in the starters.

Full Screen Apps – via the use of the cordova status bar plugin to remove the status bar.

Customizable Theme – since the Ionic base theme was built with Sass for the resulting CSS, you can easily go in and customize it to create your own theme. The base look is more of an iOS7 flat look but can be changed as desired.

Advanced Routing – using the AngularUI Router module.

Grid System via theCSS Flexible Box Layout Module (aka flexbox) standard.

What Does it Look Like?

Below are a couple of screenshots running samples on the iPad and iPhone Simulator via XCode. The first is using the Ionic CSS only and the 2nd using the AngularJS extensions for tabs and navigation. You should also definitely try out the starter samples from github.

Using CSS only

Here is the snippet of code for the above screenshot:

100

101

102

103

<div class="platform-ios7">

<div class="bar bar-header bar-positive">

<button class="button icon ion-navicon button-clear"></button>

<h1 class="title">My Application </h1>

<button class="button icon ion-edit button-clear"></button>

</div>

<content>

<div class="list card" style="margin-top:70px">

<a href="#" class="item item-icon-left">

<i class="icon ion-home"></i>

Enter home address

</a>

<a href="#" class="item item-icon-left">

<i class="icon ion-ios7-telephone"></i>

Enter phone number

</a>

</div>

<ul class="list card">

<li class="item item-checkbox">

<label class="checkbox">

<input type="checkbox">

</label>

Save Password

</li>

<li class="item item-checkbox">

<label class="checkbox">

<input type="checkbox">

</label>

Auto-Sync

</li>

</ul>

<ul class="card list">

<li class="item item-toggle">

<label class="toggle">

<input type="checkbox">

<div class="track">

<div class="handle"></div>

</div>

</label>

Airplane Mode

</li>

</ul>

<div class="card range">

<i class="icon ion-volume-low"></i>

<input type="range" name="volume">

<i class="icon ion-volume-high"></i>

</div>

<div class="card list">

<label class="item item-radio">

<input type="radio" name="group">

<div class="item-content">

JavaScript

</div>

<i class="radio-icon ion-checkmark"></i>

</label>

<label class="item item-radio">

<input type="radio" name="group">

<div class="item-content">

HTML5

</div>

<i class="radio-icon ion-checkmark"></i>

</label>

</div>

<button class="button button-royal" style="margin-left: 3px">

Royal Button

</button>

<button class="button button-calm">

Calm Button

</button>

<button class="button button-balanced">

Balanced Button

</button>

<button class="button button-energized">

Energized Button

</button>

<button class="button button-clear">

Clear Button

</button>

<button class="button button-dark">

Dark Button

</button>

<button class="button button-positive">

Positive Button

</button>

<button class="button button-full button-balanced">

Full Width Button

</button>

</content>

</div>

<div class="tabs tabs-icon-top tabs-positive">

<a class="tab-item">

<i class="icon ion-home"></i>

Home

</a>

<a class="tab-item">

<i class="icon ion-star"></i>

Favorites

</a>

<a class="tab-item">

<i class="icon ion-gear-a"></i>

Settings

</a>

</div>

The above sample code is simply to provide the UI using the Ionic CSS classes available. For adding behavior, interaction handling etc, you would either implement that yourself or you can use the AngularJS extensions provided by Ionic. Find out more on that in the next example below.

Using Extensions (via AngularJS Directives)

Navigation via a tab bar is a common mobile paradigm, and a good example to show how you might use Ionic to handle it with their Angular-Ionic extensions. Their Angular-Ionic seed project includes a simple example of how to implement it and a screenshot is shown below, but I uploaded a hosted version to try it out here.

Below are a couple snippets of sample code from the example app that shows how you could use easily implement tab navigation with the Tab Bar Controller (Angular-Ionic extension).

Sample Markup (showing one tab)

...

<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="fade-in-out"

tabs-type="tabs-icon-only">

<tab title="Pets" icon="icon ion-home" ng-controller="PetsTabCtrl">

<content has-header="true" has-tabs="true">

<list>

<item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">

<h3>{{pet.title}}</h3>

<p>{{pet.description}}</p>

</item>

</list>

</content>

</tab>

...

//Rest of the tabs here

...

</tabs>

Tab handler code Here’s some example code showing how you would implement handling that tab being shown or hidden in your code:

// A simple controller that fetches a list of data

.controller('PetsTabCtrl', function($scope, Pets) {

// "Pets" is a service returning mock data (services.js)

$scope.pets = Pets.all();

$scope.$on('tab.shown', function() {

// Might do a load here

});

$scope.$on('tab.hidden', function() {

// Might recycle content here

});

})

More details on the Ionic Tab Bar Controller handling can be foundhere.

Getting Started

You can download or clone the latest release of the Ionic project from Github here. It includes a set of example apps (under /examples/starters) that you can refer to and you can get the Sass source files (under /scss) to customize your theme if desired.

When you’re ready to create your own app, the easiest way I found was to install and use their Node.js tool to create a seed project that contains all of the dependencies for Ionic as well as some sample code.

$ sudo npm install -g ionic $ ionic start myproject

Once the seed project is created, it will look just like a base cordova/phonegap app with platforms, plugins, merges, www etc folders, so at that point you can add the platforms you want via the cordova/phonegap CLI commands. To run the examples shown above, I simply built for iOS using the $ phonegap local build iOS command (or if you’re using cordova CLI $ cordova platform add ios etc) and opened the resulting .xcodeproject (from the platforms/iOS folder) in Xcode and ran it. For a more comprehensive guide on getting started, see their docs here.

My initial experience with Ionic was very positive and I found it well-documented with many code samples, tutorials and a seed project to get up and running quickly, particularly considering it’s alpha state (came out late November 2013), so check it out. I plan to continue to try out their features in my own development and more extensively in the near future as well and will blog features or samples I think might be useful to the rest of you :).