화면 상단에 내 아이콘을 표시하는 간단한 이온 탭을 만들었습니다. 나는 그것을 화면 하단에 배치하기 위해 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

}]);

여기에서 문서를 확인할 수 있습니다.

안드로이드 장치가 당신의 열을 위해 화면 하단에있는 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"
});

구성 참조

곧 출시 될 이온 2.0.0-beta.11

app.ts에서 :

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

구성

Ionic 2 및 Ionic 3+ 업데이트 :

탭 표시 줄 위치를 변경하는 방법에는 두 가지가 있습니다.

방법 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
}]);