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