画面の上部にアイコンを表示する簡単なイオンタブを作成しました。私はそれを画面の下部に配置するためにイオンフッターバーでラップしようとしましたが、成功しませんでした。それを行うとタブが消えます。希望する外観をどのように達成すればよいですか?
<ion-footer-bar>
<ion-tabs class="tabs-icon-only tabs-stable">
...
</ion-tabs>
</ion-footer-bar>
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
Androidデバイスの画面の下部にionicFrameworkタブを配置するには、app.jsファイルを開き、angular.moduleの下に以下を追加しますコード行:
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
これが役立つことを願っています。
App.jsに配置することで機能します。
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
})
Ionicはプラットフォームの構成を自動的に考慮して、使用する遷移スタイルや、タブアイコンを上部に表示するか下部に表示するかなどを調整します。
たとえば、タブの場合、iOSの場合、デフォルトは下部に表示され、Androidは上部に表示されます。
Note1:プラットフォームが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');
});
myapp.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}]);
タブバーの位置を変更するには、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 を参照してください