ionicConfigProvider

Some components like titles, tabs behave according to the platform they are built for. For example, on iOS the default display of view title is at the center and to the left in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place some icons in the header(maybe for branding purpose) we might like to place the view title to right or to the center.

To have consistent looks across platforms we can ‘hard set’ the view title location by setting the navBar.alignTitle function of $ionicConfigProvider.

$ionicConfigProvider.navBar.alignTitle() takes 3 values
1. left
2. right
3. center

[youtube https://www.youtube.com/watch?v=Owc6x79OTK8]

YouTube Link: https://www.youtube.com/watch?v=Owc6x79OTK8 [Watch the Video In Full Screen.]

Quick fix to change position of each view:

< ion-view>
< ion-nav-title>
<center>Technotip</center>
< /ion-nav-title>
< ion-content>
< /ion-content>
< /ion-view>

As shown above, you could make use of our good old HTML friend center tag to align the nav title to center! or take some time to play with CSS to achieve the same.

Some components like tabs, titles behave according to the platform they are built for. For example, on iOS the default display of tabs is at the bottom and at top in android devices.

This might look like a minor thing at the beginning of app development, but when we want to place an ad or social sharing icons at the bottom, we might like to place the tabs at the top or visa-versa!

To have consistent looks across platforms we can ‘hard set’ the tabs location by setting the tabs.position function of $ionicConfigProvider.

$ionicConfigProvider.tabs.position() takes 2 values:
1. top
2. bottom

[youtube https://www.youtube.com/watch?v=tXW7Px7A3qo]

YouTube Link: https://www.youtube.com/watch?v=tXW7Px7A3qo [Watch the Video In Full Screen.]

To center the title of header you can make use of following syntax:

< ion-header-bar
  title="headerTitle"
  left-buttons="leftButtons"
  right-buttons="rightButtons"
  type="bar-positive"
  align-title="center">
< /ion-header-bar>

Tag: ionicConfigProvider

Positioning The Title: IONIC APPS

Positioning The Tabs: IONIC APPS