web-dev-qa-db-ja.com

Ionic上部と下部に2つのタブ

画面の上部と下部にいくつかのタブがあるtabs componentを作成したいのですが、これを達成する方法はありますか？

このようなもの：

enter image description here

2つのインスタンスを使用しようとしましたが、作成できませんでした。インスタンス間の同期をとるのは非常に難しいと思います。

何か案は？

ionic-frameworktabsionic2componentsionic3
11
Mehdi Guelloub

ページの上部にTabsComponentを配置することもできます。 TabsComponentをインポートして宣言したとすると、この属性をapp.module.tsに追加します。

imports: [
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
],

これは実際には、タブバーの位置を変更することだけができます。

16
CharithW

タブレイアウト（下部のタブ）を組み合わせて、各ページの上部に次のようないくつかの Segment コンポーネントを含むツールバーを追加できます。

<ion-header>
  <ion-toolbar>
    <ion-segment [(ngModel)]="topTab" color="secondary">
      <ion-segment-button value="camera">
        <ion-icon name="camera"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="bookmark">
        <ion-icon name="bookmark"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

これにより、下部にタブ（tabsコンポーネント）と上部にタブ（セグメント付きヘッダー）ができます。それがアプリのコンテキストで意味をなすかどうかはわかりませんが、UIの点では、結果は提供されるスクリーンショットとかなり似ています。

5
sebaferreras

Ionic 2または3を使用している場合、ここに方法があります-

  1. _src\app\app.module.ts_ファイルを開く
  2. _tabsPlacement:'bottom'_をオブジェクト値としてonicModule.forRoot()関数に渡します。
  3. 2番目の引数としてオブジェクトを渡します。
  4. _'top'_の代わりに_'bottom'_を使用して上部に表示できます
    うまくいくことを願っています!!!

コード ここにソース 。

4
S.Yadav