O'Reilly logo

PhoneGap 4 Mobile Application Development Cookbook by Zainul Setyo Pamungkas

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Exploring the UI components

In this recipe, we will explore the UI components of the Ionic framework by building a sample UI of settings.

How to do it…

To get started, follow these steps:

  1. Create a new blank Ionic application project with the name as uiComponent:
    ionic start uiComponent blank
    
  2. Change the directory to uiComponent:
    cd uiComponent
    
  3. Then add the device platforms to the project:
    ionic platform add ios
    ionic platform add android
    
  4. We open www/index.html and clean <body> so that we have the following code:
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required