Header

The header corresponds to the static and fixed region on the top of the screen, which can contain a title in the center and buttons on the left or right. Headers have their own CSS class and also for showing different header colors. For example:

<div class='bar bar-header bar-{color}'>
  <h1 class='title'> Header </h1>
</div>

We can replace {color} with the color themes available in Ionic, for example, light, stable, positive, calm, balanced, energized, assertive, royal, or dark. There is another class to display a sub header too, along with the header:

<div class='bar bar-subheader'>
  <h2 class='title'>Sub Header</h2>
</div>

We should remember to use the CSS class that has subheader to the <ion-content> directive.

Footer

Footer classes are exactly similar to headers in that they have the class bar-footer for the footer and bar-{color} representing a specific color for the footer. If we want to place buttons in the header or footer, we can place them before or after the title in HTML code according to where we want them to appear:

<div class="bar bar-footer">
  <button class="button">Home</button>
  <div class="title">Title</div>
  <button class="button">Login</button>
</div>

Buttons

Buttons are an important part of the UI as they drive actions in the whole Mobile App's UI. Ionic provides a variety of CSS styling options to display different buttons. Ionic has the class button for styling any button and has all the default colors that are available to headers/footers. The CSS class for any color would be button-{color} where color can be replaced by balanced, assertive, calm, and so on. The following image shows different sized buttons using all color themes:

Buttons can be of different sizes too. There are two classes, button-large and button-small, that provide two variances for having a larger button than normal and a smaller button than normal, respectively. If we want to create full-width buttons for Mobile Apps, there are two CSS classes. The button-block applies the display: block CSS property and allows the button to take 100% of its parent width. If we add the button-full CSS class to a button, then the button would stretch across the entire width and would not have left or right borders.

If we want to show buttons with an outline only, then we can use the CSS class button-outline. The background color is transparent for this CSS class. Also, the outline color and text color are the same as the color class used on the button.

In order to show a button without a background or a border, the button-clear CSS class can be used.

<button class="button">
  <i class="icon ion-home"></i>
</button>
<button class="button icon-left ion-settings">
  Text
</button>

<div class="button-bar">
  <a class="button button-balanced icon-left ion-home">Home</a>
  <a class="button button-calm icon-left ion-settings">Settings</a>
  <a class="button button-assertive icon-left ion-chevron-right">Next</a>
</div>

Lists

Mobile views due to limited space cannot show big tables and grids. List is the most popular and widely used UI design pattern used for mobile views. The list contains a collection of list items, which can contain any content ranging from text, images, thumbnails, icons, and so on:

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

In Ionic Framework, there are CSS classes as well as directives for multi-featured lists. There are different classes to support dividers, icons, buttons, thumbnails, and so on.

<div class="list">
  <div class="item item-divider">
    Display Settings
  </div>
  <a class="item" href="#">
    Icons Display
  </a>
</div>

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
      Call Support
    <i class="icon ion-ios-telephone-outline"></i>
  </a>
  <a class="item item-avatar" href="#">
    <img src="user-avatar.jpg">
    <h2>Demo User</h2>
    <p>Bought 23 books since 2014.</p>
  </a>
  <a class="item item-thumbnail-left" href="#">
    <img src="book-cover.jpg">
    <h2>Bestseller Book</h2>
    <p>New Book</p>
  </a>
</div>

Cards

Cards is a new UI design pattern that has become popular on mobile screens as it makes it easy to segregate important information and content. Ionic provides special CSS classes to create strong mobile views. Cards create a box around the content and add a box shadow to it, as follows:

<div class="card">
  <div class="item item-text-wrap">
    Card dummy text content.
  </div>
</div>

Cards can also contain list items and the list class can be used along with the card class. Item dividers can be used in the cards to create distinguished content.

Forms

In order to display forms in Ionic, lists can be used to display a set of input controls or input items. Both the classes item and item-input should be used to display a user form element.

By default, the input elements take 100% width. For an input text element, you can add the classes on the label tag and use the placeholder property to simulate the input's label. When the user types some text, the placeholder gets hidden and is overridden by user input:

<label class="item item-input">
  <input type="text" placeholder="Dummy Text">
</label>

If you need to put a label and input tag in the same row, then put a new span element with the class input-label displaying the label on the left column of the item row:

<label class="item item-input">
  <span class="input-label">Name</span>
  <input type="text">
</label>

In order to stack labels on top of the input elements, use the class item-floating-label on the item row containing the label and the input element. Ionic has a special style for floating labels, which animate from being placeholders to stacked labels when the user starts typing in the input element.

As mentioned, the input elements take 100% width but if you want to have inset form elements then you can encapsulate a form list in a card or either add a class list-inset to the list element. If you want to inset only a single input element and not the entire list then use the class item-input-inset on the item element.

Input elements

Apart from standard input element tags there are other input elements such as select box, checkbox, radio, and so on, which can be used in forms on mobile views. Ionic provides various CSS styles for these input elements, which will be discussed here.

<ul class="list">
  <li class="item item-checkbox">
  <label class="checkbox">
    <input type="checkbox">
  </label>
    Checkbox Option1
  </li>
</ul>

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

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

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume">
  <i class="icon ion-volume-high"></i>
</div>

Tabs

We have discussed the tabs component and directive in the previous chapters. We can also create tabs in other views by using CSS classes only. It is a horizontal bar present on the bottom of the view containing one or more tab items. The classes tabs are used on the container and the class tab-item for each item. Tabs can be given a color theme using the CSS classes such as tabs-calm, tabs-assertive, and so on:

<div class="tabs">
  <a class="tab-item">
    Tab 1
  </a>
  <a class="tab-item">
    Tab 2
  </a>
  <a class="tab-item">
    Tab 3
  </a>
</div>

Tabs can also use some extra CSS classes to display icons and control their alignment. The list of those CSS classes has been discussed in Chapter 4, Navigation and Routing in an Ionic App, in the Ionic Tabs section.

Grid

In developing a UI, creating the layout is like laying the foundation, and a strong grid system helps create solid layouts. In Ionic Framework there is a CSS grid system, which is based on the CSS flexbox layout. It helps in automatically adjusting dynamic columns in a row or rows.

In Ionic we will use the row class to represent a row and the col class for a column. We can add as many as columns in a row ranging from 1 to n and they will adjust equally. By default, when we use the col class, equally spaced columns are created.

We can also explicitly define the size by using classes such as col-50, col-33, col-75, and so on, and the rest of the columns will adjust accordingly. We can also give offset to the columns by adding the keyword offset in the column class name, for example, col-offset-50, col-offset, and so on.

In order to align columns vertically among a row, we can use the CSS classes col-top, col-center, and col-bottom respectively. The columns can be made to stack in a specific screen size and become responsive by adding the CSS classes responsive-sm, responsive-md, or responsive-lg for a small screen size (smaller than landscape phone), medium (smaller than portrait tablet), or large (smaller than landscape tablet).

The example code for using a grid or column is:

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Utility

There are some utility classes that can be used along with multiple components. Ionic Framework has standard colors that can be used throughout the Mobile App with other styles. Utility color styles can be customized and existing themes can be modified. You can modify color variables in the _variables.scss file.

Ionic also comes with an icon font set that contains the most common fonts. These can be used by applying the icon class name and the specific class for different icons. For example:

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

Also, there are padding classes available to add a padding of 10px between the outer box and the inner content. The class padding adds padding to all sides of the element whereas other CSS classes can be used for giving padding on special sides.

For example, padding-vertical, padding-horizontal for top-bottom and left-right respectively and padding-top, padding-right, and padding-bottom, for respective sides.