Icon navigation bar icons on both sides of the title bar

I am trying to add two icons on either side of the ionic header, where the title is in the center, but it always ends with 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 leads to this header:

Ionic 2 header

I can’t understand this, I tried different textbooks and tried to copy their example without any success. There is also no style, so nothing should ruin the layout. It seems that the "start" element is being tapped in this version of Ionic or something like that. Can someone spot me in the right direction?

This is my conclusion when running "ion information":

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
+6
source share
2

left start

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>
+16

@varun aaruru . hideBackButton="true",

<ion-header hideBackButton="true">
    <ion-navbar>
        <ion-title>trans-result</ion-title>
    </ion-navbar>
</ion-header>
0

Source: https://habr.com/ru/post/1015421/


All Articles