Ionic 2/3/4: как выровнять кнопку в заголовке по правой стороне заголовка

В Ionic 2 / Ionic 3 есть что-то для этого, просто посмотрите на следующий код:

<ion-header>
  <ion-navbar primary>
    <ion-buttons start>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-title>
      My Page
    </ion-title>

    <ion-buttons end>
      <button (click)="myFunction()" ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Преимущество решения вашей проблемы таким способом заключается в том, что ваша навигационная панель будет автоматически соответствовать рекомендациям android / ios / windows. Таким образом вы улучшите качество своего приложения.

Дополнительная информация о правилах:

Android: https://developer.android.com/guide/practices/ui_guidelines/index.html

iOS: https://developer.apple.com/ios/human-interface-guidelines/

Windows: https://developer.microsoft.com/en-us/windows/design

ionic 4 ion-navbar заменяется на кнопку ion-back-button, а в Ionic 4 кнопка возврата похожа на

<ion-header>
  <ion-toolbar>
       <ion-buttons slot="start">
  <ion-back-button></ion-back-button>
       </ion-buttons>
    <ion-title>
     Home
    </ion-title>
      <ion-button slot="secondary">
        <ion-icon name="search"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Вы можете добавить кнопку справа в заголовке в ionic 2.0

<ion-navbar *navbar>
    <ion-title>
        TODO APP
    </ion-title>
    <ion-buttons end>
        <button ><ion-icon name="home"></ion-icon></button>
    </ion-buttons>
</ion-navbar>

Вы можете добавить класс css своего собственного значка следующим образом

css

.ion-ios-custom:before {
    background-image: url("image-icon.png");        
 }

ИЛИ

.ion-ios-custom:before {       
   content: "\f439"; /* your font code */
 }

ИЛИ

.ion-ios-custom:before {
   content: url("image-icon.png") !important;
}

html

<ion-icon name="custom"></ion-icon>

Для меня это работа.

Ionic 4 - Заголовок

<ion-header>
   <ion-toolbar color="primary">
      <ion-title class="titleHeader">User Detail</ion-title>
      <ion-buttons slot="end">
            <ion-back-button defaultHref="/"></ion-back-button>
      </ion-buttons>
   </ion-toolbar>
</ion-header>

Я решил свою проблему вот так:

ion-buttons {
    order: 10
}

Попробуйте добавить его в свою таблицу стилей

Примечание. Я использовал это в ionic2.

<ion-toolbar color='primary'>
    <button ion-button menuToggle>
        <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title>TODO APP</ion-title>
    <ion-buttons start>
        <button (click)='YOUR_FUNCTION_CALL' ion-button icon-only>
            <ion-icon name='YOUR_ICON_NAME'></ion-icon>
        </button>
    </ion-buttons>
</ion-toolbar>

Заменять:

1. YOUR_FUNCTION_CALL с вызовом функции, которую необходимо вызывать при нажатии
2. YOUR_ICON_NAME с названием значка

значки можно найти на этом веб-сайте http://ionicframework.com/docs/v2/ionicons/

Это можно сделать следующим образом:

 <ion-header class="ion-no-border">
   <ion-toolbar>
     <ion-button slot="start">
        <ion-icon name="search"></ion-icon>
     </ion-button>
     <ion-title>
       utenze
     </ion-title>
     <ion-button slot="end">
        <ion-icon name="menu"></ion-icon>
     </ion-button>
   </ion-toolbar>
 </ion-header>

<ion-view title="home" align-title="center">    
    <ion-nav-buttons side="right">        
        <button ng-click="search()" class="button button-icon icon ion-android-search"></button>
    </ion-nav-buttons>    
    <ion-content has-bouncing="0px">
    </ion-content>
</ion-view>

это должно сработать для вас ......