Ionic: Advanced HTML5 Hybrid Mobile App Framework

The bond between HTML5 and Native has arrived.

Ionic is a beautiful front-end framework for developing hybrid mobile apps in HTML5.

Create hybrid mobile apps with the web technologies you love.

Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JScomponents for building highly interactive apps. Built with Sass and optimized for AngularJS.

Performance obsessed

Speed is important. So important that you only notice when it doesn't work. Ionic is built to perform and behave great in the latest mobile devices. With minimal DOMmanipulation, zero jQuery, and hardware acceleratedtransitions, one thing is for sure: you'll be impressed.

AngularJS & Ionic

A match made in heaven. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.

Native focused

Ionic is modeled off of popular native mobile development SDKs, making it easy to understand for anyone that has built a native app for iOS or Android. Just drop it in your code to get going, and push through PhoneGap when it's ready. Develop once, deploy everywhere.

Beautifully designed

Clean, simple, and functional. Ionic has been designed to work and display beautifully on all current mobile devices. With tons of popular mobile components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme, you'll wonder how you lived without it.

Built by nerds (like you)

Built and maintained by developers and designers passionate about web technologies. Ionic focuses on standards compliant code, is forward thinking, and managed through Github. We want to make mobile development with HTML5 awesome and simple.

Ionic examples

Check out our examples, including starter templates and showcase demos.

Header

Headers are fixed regions at the top of a screen that can contain a title label, andleft/right buttons for navigation or to carry out various actions.

Headers come in a variety of default color options:

bar-light

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

bar-positive

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

bar-balanced

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

bar-energized

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

bar-assertive

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

Sub Header

A secondary header bar can be placed below the original header bar. There are quite a few more ways to customize Headers. Have a look at Button Bars to get other ideas on how it could be used.

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

Content

The content area in Ionic is the scrollable viewport of your app. While your headers and footers will be fixed to the top and bottom, respectively, the content area will fill the remaining available space.

* For more content options, see the Content docs.

<content padded="true">
  ...
</content>

Footer

Footers are regions at the bottom of a screen that can contain various types of content.

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

Footers have the same color options as the headers, just use bar-footer instead ofbar-header.

Buttons

Ah, the Button, an essential part of any mobile experience. Like the Header, they come in the full spectrum of Ionic's default colors.

By default a button has display: inline-block applied. Other options include blockbuttons for a full width.

<button class="button">
  Default
</button>

<button class="button button-light">
  button-light
</button>

<button class="button button-stable">
  button-stable
</button>

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

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

<button class="button button-energized">
  button-energized
</button>

<button class="button button-assertive">
  button-assertive
</button>

<button class="button button-royal">
  button-royal
</button>

<button class="button button-dark">
  button-dark
</button>

Block Buttons

Adding button-block to a button applies display: block display. A block button will however go 100% of its parent's width. In the example, the button's containing content element also has padding applied, so there is some breathing room between the edge of the device and the buttons.

<button class="button button-block button-positive">
  Block Button
</button>

Full Width Block Buttons

Adding button-full to a button not only applies display: block, but also removes borders on the left and right, and any border-radius which may be applied. This style is useful when the button should stretch across the entire width of the display. Additionally, the button's parent element does not have padding applied.

<button class="button button-full button-positive">
  Full Width Block Button
</button>

Outlined Buttons

Use button-outline to apply an outline button style, which also has a transparent background.

Note: The text and border will take the color of the applied button style, meaningbutton-positive will result in blue text and border, with a transparent background.

<button class="button button-outline button-positive">
  Outlined Button
</button>

Clear Buttons

Add button-clear to remove the border and make the text stand out.

Note: The text will take the color of the applied button style, meaning button-positivewill result in blue text and no border instead of a blue background.

<button class="button button-clear button-positive">
  Clear Button
</button>

Icon Buttons

Icons can easily be added to any button by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.

Icons can also be set with a child element inside the button, however, assigning the icon directly to the button reduces the number of elements in the DOM.

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

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

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

Buttons in Headers

When buttons are placed in headers or footers, they take the style of the bar by default, so you don't have to use the extra style classes. To change this, add the desired style class.

<div class="bar bar-header">
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</div>

Clear Buttons in Headers

For a more minimal approach to header buttons, simply add the button-clearclassname to remove the background button color and border.

<button class="button button-icon">
  <div class="bar bar-header">
    <button class="button button-icon icon ion-navicon"></button>
    <div class="h1 title">Header Buttons</div>
    <button class="button button-clear button-positive">Edit</button>
  </div>
</button>

Button Bar

Buttons can also be easily grouped together using the button-bar classname. In this example, a button bar was added to the default header bar, as well as in the main content area of the screen.

<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

List

The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versitile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

For more power you can use Ionic's AngularJS directives. Check out the AngularJS list docs to get more detailed information.

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

* For a more extensive overview on Lists, read AngularJS List Docs

List Dividers

List items can also be dividers to organize and group the list items. Use theitem-divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

List Icons

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each item element. Icons can easily be added to any item by using either the built in Ionicons, or any custom font-pack you choose.Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to the right. When a list item has an icon on both sides then both classes will need to be applied.

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both left and right side icons. The third item has no a right side icon assigned (whichs defaults to the right arrow). Additionally, the thrid item also adds an item-note. The fourth icon has added a badge element.

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

List Buttons

Use item-button-right or item-button-left to place a button within an item.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios7-telephone"></i>
    </button>
  </div>

  ...

</div>

List Avatars

List avatars are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use thelist-thumbnail classname. In this example, we are using images of album covers.

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

List Thumbnails

List Thumbnails are essentially a showcase of an image larger than an icon, and will often span/define the entire height of the list item. To create a thumbnail style list, use theitem-thumbnail-left to have it align on the left, and item-thumbnail-right for the right side.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

Cards

Cards have become widely used in recent years. They're are a great way to contain and organize information, while also setting up predictable expectations for the user. With so much content to display at once, and often so little screen realestate, cards have fast become the design pattern of choice for many companies, including the likes of Google,Twitter, and Spotify..

For mobile experiences, Cards make it easy to display the same information visually across many different screen sizes. They allow for more control, are flexible, and can even be animated. Cards are usually placed on top of one another, but they can also be used like a "page" and swiped between, left and right.

<div class="card">
  <div class="item item-text-wrap">
    This is a basic Card with some text.
  </div>
</div>

Card Headers and Footers

Cards can be customized similarly to how you would fill a normal screen. For example, a card can easily have Headers and Footers placed inside of them. Add theitem-divider classname above or below the content within the card element.

<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 with some text.
  </div>
  <div class="item item-divider">
    I'm a Footer in a Card!
  </div>
</div>

Card Lists

Use the list card classname to create a card with lists.

<div class="list card">

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

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Card Images

Images look great in cards, and can be combined with lists and other elements.

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

Card Showcase

Here is a showcase of a card using several different items. It begins with the list cardelement, utilizing the item-avatar list item, an item-body element for images and text, and a footer with the item-divider classname.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
      the content is from a card-body consisting of an image and paragraph text. The footer
      consists of a Tab Bar, icons aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      Like
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      Share
    </a>
  </div>

</div>

Forms & Inputs

A list is also used to group related input elements. Both item-input and item is then used to designate each individual input field and it's associated label.

Ionic prefers to create the item-input out of the <label> element so that when any part of the row is tapped then the underlying input receives focus.

Text Input: Placeholder Labels

In the example, it'll default to 100% width (no borders on the left and right), and uses theplaceholder attribute to simulate the input's label. Then the user begins to enter text into the input the placeholder label will be hidden. Notice how <textarea> can also be used as a multi-line text input.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

Text Input: Inline Labels

Use input-label to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using aplaceholder label too.

<div class="list">
  <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password">
  </label>
</div>

Text Input: Stacked Labels

Stacked labels always places the label on top of the input. Each item should haveitem-stacked-label assigned, and the input's label should have input-labelassigned. This example also uses the placeholder attribute so user's have a hint of what type of text the input is looking for.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

Inset Forms

By default each input item will fill 100% of the width of its parent element (the list). However, you can inset the list using either the list-inset or card classnames. Thecard classname applies a lower box shadow while list-inset does not. Additionally, if the list's parent element has padding assigned then this will also give the form an inset appearance.

<div class="list list-inset">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
</div>

Inset Inputs

Using list-inset will inset the entire list, whereas placing item-input-inset will inset an input into an individual list item. Placing a button inside the item

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Cancel
    </button>
  </div>

</div>

Input Icons

Icons can be easily added to the left of an item-input input. Simply add an icon before the <input>. By default the icon will take the color of label text. However, you can also use add placeholder-icon to give it a placeholder color.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>

Header Inputs

Inputs can also be placed in headers, along with buttons to submit or cancel the form.

<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" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

Toggle

A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the<label> in order to make the entire toggle easy to tap or drag.

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

This is an example of multiple toggles within a list. Note the item-toggle class was added along side item for each item.

<ul class="list">

  <li class="item item-toggle">
     HTML5
     <label class="toggle">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

  ...

</ul>

Checkbox

A checkbox is no different than the HTML checkbox input, except it's styled differently. This is an example of multiple checkboxes within a list. Note the item-checkbox class was added along side item for each item.

Ionic prefers to use the <label> element for a checkbox item in order to make the entire checkbox tappable.

<ul class="list">

  <li class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox">
     </label>
     Flux Capacitor
  </li>

  ...

</ul>

Radio Button List

Radio buttons act no differently as standard radio input elements. Following this convention will display a list of radio buttons similarly seen in modern app.

Each item-radio must have a radio input with the same input name attribute. Theradio-icon class is used to designate when to show and hide the icon element.

Ionic prefers to use the <label> element for a radio item in order to make the entire area tappable.

<div class="list">

  <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">
      Go
    </div>
    <i class="radio-icon ion-checkmark"></i>
  </label>

  ...

</div>

Range

This is a Range. Ranges can be themed to any default Ionic color, and used in various other elements such as a list item or card.

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

Tab Bar

The Tab Bar is a horizontal region of buttons or links that allow for a consistent navigation experience between screens. It can contain any combination of text and icons, and is a popular method for enabling mobile navigation.

* For building tabbed interfaces, see the Tab Bar Controller docs.

The containing tab bar should have the tabs classname, and each tab should have thetab-item classname. By default, tabs will be without an icon and text-only.

<div class="tabs">
  <a class="tab-item">
    Home
  </a>
  <a class="tab-item">
    Favorites
  </a>
  <a class="tab-item">
    Settings
  </a>
</div>

The Tab Bar can be styled to match the standard Ionic colors (the example is using thedefault color. Use these classes to change the color of the tab bar: tabs-defaulttabs-secondary tabs-primary tabs-info tabs-success tabs-warningtabs-danger tabs-dark

Icon-only Tab Bar

Add tabs-icon-only along with the tabs classname.

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

Top Icon Tab Bar

The classic tab bar. Add tabs-icon-top along with the tabs classname.

<div class="tabs tabs-icon-top">
  <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>

Left Icon Tab Bar

Add tabs-icon-left along with the tabs classname.

<div class="tabs tabs-icon-left">
  <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>

Utility

Ionic comes with a handful of utility classes to help quickly style your design. Each are optional.

Colors

Ionic comes with a set of colors to start with, but as a general rule colors are meant to be overridden. We prefer saying that Ionic provides a recommended naming convention for your colors, swatches, themes, etc.

Utility colors are added to help set a naming convention. You'll notice Ionic purposely does not use words like "red" or "blue", but instead have colors which represent an emotion or generic theme.

Let's be realistic, assigning colors is one of the easier tasks in CSS, and each app will have different requirements for colors. Ionic's goal is to provide a clean system to build on top of and maintain, and stays away from dictating how each app chooses to color its custom design.

To customize the colors you can simply override those coming from the ionic.css CSS file. Additionally, since Ionic is built using SASS, for more power and flexibility you could also modify and extend the color variables within the _variables.scss file.

* For more flexibility, you can Customize Ionic With Sass

Icons

Ionic also comes with its own free and open-sourced icon font, Ionicons, with over 440 icons to choose from.

Simply add icon and the Ionicon classname for the icon to show, which can be easily looked up on the Ionicons homepage.

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

Note: Ionic is certainly not restricted to using only the Ionicons icon pack, so please feel free to use any icons you wish.

Padding

Many components in Ionic purposely have both padding and margin reset set to zero. In many instances apps will have components bleed to the edge of the screen, and by starting each component at zero developers can easily control padding and margins throughout the app.

The padding utility classes can be reused to give any element's content some breathing room, meaning it adds a default 15px between the outer box of the element and its inner content. The following classes are not required for any element, but may be helpful with your layout.

padding Adds padding around every side.
padding-vertical Adds padding to the top and bottom.
padding-horizontal Adds padding to the left and right.
padding-top Adds padding to the top.
padding-right Adds padding to the right.
padding-bottom Adds padding to the bottom.
padding-left Adds padding to the left.

Grid

Ionic's grid system is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage here is that the devices that Ionic supports, all support flexbox.

Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There's no restriction to a 12 column grid, or having to explicitly state how large each column should be. And to add to the crazy, you can vertically align content within each column.

Use the row classname is used to designate, surprise, a row, and col is used for a column. In the demo to the right we chose to have four, then two, columns, but we could have just as easily used 3, 6, 7, 23, etc., it doesn't matter. Point is, add the number of columns your layout requires and don't worry about figuring out the percentages because it figures it out automagically.