web-dev-qa-db-ja.com

Ionicナビゲーションバーボタン-右側

Ionic=を初めて使用します。現在、listviewがあり、リストに移動すると[戻る]ボタンが表示されます。

<ion-nav-bar class="bar-stable nav-title-slide-ios7">
  <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
    Back
  </ion-nav-back-button>
</ion-nav-bar>

画面の右側にボタンを追加するにはどうすればよいですか。また、リストに移動すると1度しか表示されません。

angularjshtmlionic-framework
11
Harry

<ion-header-bar align-title="right">を使用できます

完全な実装（左と右の両方）（ docs から）：

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

Harryが指摘したように、ion-nav-buttonsを追加してside=rightを設定することは、これを実現する正しい方法です。

（@ハリーの回答からコピー）

<ion-nav-bar class="bar-stable nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
    </ion-nav-back-button>
    <ion-nav-buttons side="right">
        <button class="button button-clear button-positive" ng-click="reset()">
            Refresh
        </button>
    </ion-nav-buttons>
</ion-nav-bar>
10
Bipin Bhandari

これは私がやったことです：

<ion-nav-bar class="bar-stable nav-title-slide-ios7">
    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
    </ion-nav-back-button>
    <ion-nav-buttons side="right">
        <button class="button button-clear button-positive" ng-click="reset()">
            Refresh
        </button>
    </ion-nav-buttons>
</ion-nav-bar>
26
Harry

<ion-nav-buttons>はあなたが探しているものです： link

これを見つけるのに長い時間がかかりましたが、うまくいきました。 side="right"を属性として。

これがドキュメントでより明白であるならば、それは素晴らしいです。

4
dk123

Ionic 4 Header

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

あなたもここから答えを見つけることができます： Ionic 2/3/4：ヘッダーのボタンをヘッダーの右側に配置する方法

0
Abdullah Pariyani