画面下部にイオンタブを配置する方法は？

Question

私は画面の上部に自分のアイコンを表示する簡単なイオンタブを作成しました。私はそれをイオンフッタバーで包んで、画面の下に置いて成功させようとしました。私はそれを行うとタブが消えます。私はどのように私が望む外観を達成する必要がありますか？イオン（http://blog.ionic.io/the-final-beta/）のベータ14以来

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

Answer 1

、今、彼らは、彼らが上に構築されているプラ​​ットフォームに応じて動作するようにしようとすることを意味し、彼らのプラットフォーム値をデフォルトにいくつかの設定変数があります。 タブの場合は、iOSの場合、デフォルトは下部に表示され、Androidは上部に表示されます。

あなたがすることができます簡単に「ハードセット」は、このようなあなたの設定関数内、$ionicConfigProviderでtabs.position機能を設定することにより、すべてのプラットフォームの場所：

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

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

}]); 

あなたは場所にドキュメントhere

Answer 2

を確認することができますAndroidデバイスのための画面の下部にあるionicFrameworkタブは自分app.jsファイルを開き、下angular.moduleは、次のコード行を追加します：

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

希望すると、これが役に立ちます。イオン2（クリーナー/改善された構文）のため

Answer 3

更新：app.jsで

：

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

See Configs

Answer 4

イオン2画面の下部にあるイオンのタブを配置する方法現在のバージョン2.0.0イオン-beta.10については

。 app.tsで

：

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

：

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

がまもなくリリースされるイオン性2.0.0-beta.11 app.tsで

についてConfig

を参照してください。

Config

Answer 5

あなたのapp.jsにそれを置くと、その作業が行われます。

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

Ionicは、使用するトランジションスタイルやタブアイコンを上または下に表示するかどうかを自動的に調整します。例えば

は、タブの場合には、IOSのためのデフォルトは上底面、及びAndroid上で表示することです。

注1：プラットフォームはiOS版やAndroidでない場合、それは注2

のiOSをデフォルトうことに留意すべきである： あなたが開発している場合デスクトップブラウザでは、iOSのデフォルト設定を使用します。

Answer 6

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

Answer 7

イオン2、およびイオンの更新3+：

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

方法1：<ion-tabs>

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

法の使用tabsPlacement propertiveを2：変更設定をapp.module.ts

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

docs

Answer 8

はサイドでapp.jsは、あなたがの.configモジュールに$ ionicConfigProviderを注入する必要があると$ ionicConfigProvider.tabs.position（ '下に'）

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

}); 

を追加するファイルを参照してください。