離子選項卡默認情況下顯示在底部

Question

我試圖在頁面頂部顯示離子選項卡，但沒有理由不發生。我試着明確地將$ionicConfigProvider.tabs.position('top');放入.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider)，但沒有任何變化。

這裏是我的代碼

<div class = "tabs-striped tabs-background-positive tabs-color-light"> 
<div class = "tabs"> 
<a class = "tab-item"> 
<i class = "icon ion-home"></i> 
</a>   
<a class = "tab-item active"> 
<i class = "icon ion-star"></i> 
</a> 
<a class = "tab-item"> 
<i class = "icon ion-planet"></i> 
</a> 
</div> 
</div> 

Answer 1

<ion-tabs class="has-tabs-top"> 
    //here put your all tabs 
</ion-tabs> 

可以覆蓋離子CSS默認屬性第二種方法：

@media not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx) 
.tabs { 
padding-top: 2px; 
border-top: none !important; 
border-bottom: none; 
background-position: top; 
background-size: 100% 1px; 
background-repeat: no-repeat; 
**position: fixed; 
top: 0px;** 
} 

希望這會幫助你。