Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 2 navbar icons on both side of title

I'm trying add two icons in each sides of a ion-header where the title is in the center, but it always ends up with the two icons on the right side.

This is my code

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons end>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

which results in this header:

Ionic 2 header

I can't figure it out, tried different kind of tutorials and trying to copy their example without any success. There's no styling behind it either, so nothing should mess up the layout. It feels like the "start" element is bugged in this version of Ionic or something. Could someone pinpoint me to the right direction?

This is my output when running "ionic info":

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed
like image 286
Sam Avatar asked Mar 02 '17 21:03

Sam


People also ask

How do I use large titles and Ion-buttons in ion-content?

When using the large title and ion-buttons elements inside of ion-content, the ion-buttons elements should always be placed in the end slot. When using collapsible large titles, it is required that fullscreen is set to true on ion-content and translucent is set to true on the main ion-header.

What is collapsible large titles ionic?

Collapsible Large Titles Ionic provides a way to create the collapsible titles that exist on stock iOS apps. Getting this setup requires configuring your IonTitle, IonHeader, and (optionally) IonButtons elements.

What is Ionion-title?

ion-title is a component that sets the title of the Toolbar. <!-- Default title --> < ion-toolbar > < ion-title > Default Title </ ion-title > </ ion-toolbar > <!--

What is the difference between the ionheader and the iontitle?

The first IonHeader represents the "collapsed" state of your collapsible header, and the second IonHeader represents the "expanded" state of your collapsible header. Notice that the second IonHeader must have collapse="condense" and must exist within IonContent. Additionally, in order to get the large title styling, IonTitle must have size="large".


1 Answers

I used left instead of start

check this plunker

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons left>
        <button ion-button icon-only>
          <ion-icon name="chatboxes"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons right>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
like image 142
varun aaruru Avatar answered Oct 17 '22 05:10

varun aaruru