web-dev-qa-db-ja.com

Ionic 2/3/4：ヘッダーのボタンをヘッダーの右側に揃える方法

右側に合わせるには、ヘッダーの左側にボタンが作成アイコンなしで表示されます。

ここに私がやっていることがあります：

<ion-toolbar>
<ion-title>TODO APP</ion-title>
<button class = "button button-icon">
    <i class="icon ion-compose"></i>
</button>
</ion-toolbar>
htmlionic-frameworkangularionic2
13
blackHawk

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>

この方法で問題を解決する利点は、navbarが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

29
Guillaume Le Mière

ionic 4 ion-navbarはion-back-buttonに置き換えられ、Ionic 4 backボタンは

<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>
6
Hari

ionic 2. のヘッダーの右側にボタンを追加できます

<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");        
 }

[〜＃〜] or [〜＃〜]

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

[〜＃〜] or [〜＃〜]

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

html

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

それは私の仕事です。

イオン4-ヘッダー

enter image description here

<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>
3
Abdullah Pariyani

私はこれで問題を解決しました：

ion-buttons {
    order: 10
}

スタイルシートに追加してみてください

注： ionic2でこれを使用しました。

0
Ajay Gupta
<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/

0
SABDAR SHAIK