画面上部にアイコンを表示するシンプルなionicタブを作成しました。それを画面下部に配置するために、それをionic-footer-barで包んでみましたが、うまくいきませんでした。そうするとタブが消えます。私が望む外観をどのように達成すべきですか？

<ion-footer-bar>
    <ion-tabs class="tabs-icon-only tabs-stable">
    ...
    </ion-tabs>
</ion-footer-bar>

Ionic のベータ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

}]);

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

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

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

これがお役に立てば幸いです。

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

app.jsの場合：

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

構成を見る

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

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

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

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

注1：プラットフォームがiOSまたはAndroidでない場合、デフォルトでiOSになります。

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

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');

});

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

現在のバージョンでは、ionic 2.0.0-beta.10です。

app.tsで：

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

構成を参照

間もなくリリースされるionic 2.0.0-beta.11

app.tsで：

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

構成

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

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

方法1：tabsPlacementプロパティを使用<ion-tabs>

<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'
    })
  ]
})

ドキュメントを見る

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