Modifying an Ionic project
In order to build upon the knowledge that we have gained and the work that we have previously done, we will modify the user interface of the project that we previously created. We will start off by modifying the header.
Modifying the header
Let's say that we would like to change the header bar to a calm blue color. Navigate to the index.html
file available at www | index.html.
Refer to the body
block, and using the reference UI components, change the ion-nav-bar
class to the following:
<ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar>
Modifying the tab colour, icons, and names
Since we have decided to change the header color, we will go ahead and modify the tab bar to make its color ...
Get Learning Node.js for Mobile Application Development now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.