Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
PhoneGap 4 Mobile Application Development Cookbook

You're reading from   PhoneGap 4 Mobile Application Development Cookbook Build real-world hybrid mobile applications using the robust PhoneGap development platform

Arrow left icon
Product type Paperback
Published in Oct 2015
Publisher
ISBN-13 9781783287949
Length 356 pages
Edition 1st Edition
Arrow right icon
Toc

Table of Contents (14) Chapters Close

Preface 1. Welcome to PhoneGap 3 FREE CHAPTER 2. Movement and Location – Using the Accelerometer and Geolocation Sensors 3. Filesystems, Storage, and Local Databases 4. Working with Audio, Images, and Video 5. Working with Your Contacts List 6. Hooking into Native Events 7. Working with XUI 8. Working with the Ionic Framework 9. Ionic Framework Development 10. User Interface Development 11. Extending PhoneGap with Plugins 12. Development Tools and Testing Index

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" rel="stylesheet">
        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image