facebook-squared twitter-squared rss-squared gplus-squared

Monday

22

January 2018

0

COMMENTS

Random Ionic Tips: Tabs and Text Color

Written by on 22 January 2018

This article comprises of following ionic tips

  1. Set Root Nav and Tabs
  2. How to apply text color in Ionic

Set Root Nav and Tabs

My app structure is like

app structure before navigation ionic tips

The Red Box tells that I am on Login Screen . After successfully login, I was redirected to the Tabs Page. Tabs Page next decides where to go next. For Instance I was redirected to the Home Page, now my app looks like

app structure after login ionic tips

Now if I want to logout, I would go the profile page. There I am using a service which handles the logout logic as follows.

public logout(){
  this.auth.logout();
  this.navCtrl.setRoot('Login');
}

The third line redirects the app to Login Screen. The flow diagram depicts following state of our application.

App flow after logout ionic tips

Get Root Nav

Why we have two Login(s). We are not properly redirected, we are still inside the tab Page. Read more about Nav Controller

Actually In tabbed interface, the navCtrl.setRoot('Login') would reroute the current active tab. We need to access Login Page from Root by adding following code snippets.

import { ... App } from 'ionic-angular';
constructor(
  ...
  private app: App
){}

logout(){
  this.auth.logout();
  this.app.getRootNav().setRoot('Login');
}

How to apply Foreground color in Ionic

The color attribute is widely used in Ionic components, be it a button, a navbar, a header. Just give it a color="primary" and you are all set. Your component is now customized with the color property. Usually this color property is used to change the Background color.

Things get a little tricky when we want to change the text color. For instance applying color="secondary" won’t have any effect on p or h1 tags.

There are two ways to get around this

Using ion-text

Just add ion-text along with color property


This starter project is our way of helping you get a functional app running in record time.

Using color classes

Ionic creates color classes for each platforms i-e Android, iOS and Windows based on the colors defined in variable.scss

.text-md-primary
.text-md-secondary
...
.text-ios-primary
.text-ios-secondary
...
.text-wp-primary
.text-wp-secondary

You can also see it through this animated gif

change text color in ionic tips

More Ways

I want you to add your views and thoughts on things discussed in this article. Stay tuned for next random ionic tips.

Leave a Reply

%d bloggers like this: