web-dev-qa-db-ja.com

画面の下部にionicタブを配置する方法は？

画面の上部にアイコンを表示する簡単なイオンタブを作成しました。私はそれを画面の下部に配置するためにイオンフッターバーでラップしようとしましたが、成功しませんでした。それを行うとタブが消えます。希望する外観をどのように達成すればよいですか？

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>
tabsionic
94
Italo Maia

Ionicのbeta 14から（ http://blog.ionic.io/the-final-beta / ）、現在はプラットフォーム値にデフォルト設定されているいくつかの設定変数があります。つまり、それらが構築されているプラ​​ットフォームに従って動作しようとします。タブの場合、iOSの場合、デフォルトは下部に表示され、Androidは上部に表示されます。

次のようにconfig関数内でtabs.position関数を$ionicConfigProviderに設定することにより、すべてのプラットフォームの場所を簡単に「ハードセット」できます。

MyApp.config(['$ionicConfigProvider', function($ionicConfigProvider) {

    $ionicConfigProvider.tabs.position('bottom'); // other values: top

}]);

ドキュメントを確認できます here

174
jrl53

Androidデバイスの画面の下部にionicFrameworkタブを配置するには、app.jsファイルを開き、angular.moduleの下に以下を追加しますコード行：

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

これが役立つことを願っています。

63
Ahmed Na.

Ionic 2の更新（クリーナー/改善された構文）：

App.jsの場合：

@App({
  ...
  config: {
    tabbarPlacement: 'bottom',
  }
})

構成を参照

9
Greg Blass

App.jsに配置することで機能します。

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom');
})

Ionicはプラットフォームの構成を自動的に考慮して、使用する遷移スタイルや、タブアイコンを上部に表示するか下部に表示するかなどを調整します。

たとえば、タブの場合、iOSの場合、デフォルトは下部に表示され、Androidは上部に表示されます。

Note1：プラットフォームがiOSまたはAndroidでない場合、デフォルトになることに注意してくださいiOSへ

注2：デスクトップブラウザで開発している場合は、 iOSのデフォルト設定を使用

7
Raj Kumar

App.jsファイルの側で、$ ionicConfigProviderを.configモジュールに挿入し、$ ionicConfigProvider.tabs.position（ ‘bottom’）を追加する必要があります

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {

 $ionicConfigProvider.tabs.position('bottom'); //top

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
.
.
.
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});
5
Sandip Moradiya

ionic 2の画面下部にIonicタブを配置する方法

現在のバージョンの場合ionic 2.0.0-beta.10。

App.tsで：

ionicBootstrap(MyApp, [], {
  tabbarPlacement: "bottom"
});

Config を参照してください

近日中にリリースされるionic 2.0.0-beta.11

App.tsで：

ionicBootstrap(MyApp, [], {
  tabsPlacement: "bottom" 
});

構成

3
MasterProgrammer200
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
    $ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
1
Nasouh Almrstani

Ionic 2およびIonic 3+の更新：

タブバーの位置を変更するには、2つの方法があります。

方法1：<ion-tabs>の固有語tabsPlacementを使用する

<ion-tabs  tabsPlacement='bottom' >
    <ion-tab [root]="rootTab" tabTitle="Home"></ion-tab> 
</ion-tabs>

方法2：app.module.tsの設定を変更

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

docs を参照してください

0
Duannx