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

Monday

23

April 2018

0

COMMENTS

Ion-toolbar and Ion-navbar

Written by on 23 April 2018

In Development…

Both of these Ionic Ion-toolbar and Ion-navbar help you setup header of the page. Normally we have this simple header just a title which can be achieved as

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

Which will give us following output

Ionic basic header with title technbuzz.com

And when we push new page or add a new push stack that’s what we get.

A gif which shows how Ionic add back button which we go to details page technbuzz.com

ion-nav will automatically add the back arrow button for us.

  • ion navbar will give you back button
  • ion toolbar will give you extra buttons on the right
  • adding both works buth than you extra padding of 4px on top and botton
  • Add image explaining above point
  • best bet is to remove ion nabar, but you don’t have back button
  • add it via ion-toolbar as but android will still place it on the right
  • better use left instead of start

Leave a Reply

%d bloggers like this: