如何改變離子的導航欄大小？

由於平臺的工作原因，導航欄的默認尺寸爲Android，另一個爲iOS。爲了達到所需的審美目的，我需要在Android版本中使nav-var變大。到目前爲止，我只能用CSS改變文本和顏色的大小，但不能改變欄本身的大小。如何改變離子的導航欄大小？

是否有可能通過設計改變它或不可改變？

來源

2015-05-26 David Prieto

當然，你可以改變離子的任何視覺方面。這裏有一個來自CodePen的實例。

所以，我將這個類添加到標題並添加了適當的樣式。另外，我添加了!important; CSS規則。將代碼複製從CodePen粘貼在這裏：

angular.module('ionicApp', ['ionic']) 
 

 
.config(function($stateProvider, $urlRouterProvider) { 
 
    $stateProvider 
 
    .state('page1', { 
 
    url: '/1', 
 
    templateUrl: 'page1.html' 
 
    }) 
 
    .state('page2', { 
 
    url: '/2', 
 
    templateUrl: 'page2.html' 
 
    }) 
 
    .state('page3', { 
 
    url: '/3', 
 
    templateUrl: 'page3.html', 
 
    controller : "Page3Ctrl" 
 
    }) 
 
    
 
    $urlRouterProvider.otherwise("/1"); 
 
}) 
 

 
.controller('Page3Ctrl', function($scope) { 
 
    
 
})

.mynavbar{ 
 
    height: 200px !important; 
 
}

<html ng-app="ionicApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 

 
    <title>Ionic Template</title> 
 

 
    <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet"> 
 
    <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <ion-nav-bar class="bar-positive nav-title-slide-ios7 mynavbar" align-title="center"> 
 
     <ion-nav-back-button class="button-icon ion-arrow-left-c"> 
 
     </ion-nav-back-button> 
 
     <ion-nav-buttons side="left"> 
 
      <button class="button"> 
 
      LeftButton! 
 
      </button> 
 
     </ion-nav-buttons>   
 
     <ion-nav-buttons side="right"> 
 
      <button class="button"> 
 
      RightButton! 
 
      </button> 
 
     </ion-nav-buttons>   
 
     
 
    </ion-nav-bar> 
 

 
    <ion-nav-view class="slide-left-right"></ion-nav-view> 
 

 
    <script id="page1.html" type="text/ng-template"> 
 
     <!-- The title of the ion-view will be shown on the navbar --> 
 
     <ion-view title="Page 1" hide-back-button="true"> 
 
     <ion-content class="padding"> 
 
      <!-- The content of the page --> 
 
      <a class="button" ui-sref="page2">Go To Page 2</a> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script>  
 

 
    <script id="page2.html" type="text/ng-template"> 
 
     <!-- The title of the ion-view will be shown on the navbar --> 
 
     <ion-view title="Page 2"> 
 
     <ion-content class="padding"> 
 
      <!-- The content of the page --> 
 
      <a class="button" ui-sref="page1">Go To Page 1</a> 
 
      <a class="button" ui-sref="page3">Go To Page 3</a> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 

 
    <script id="page3.html" type="text/ng-template"> 
 
     <!-- The title of the ion-view will be shown on the navbar --> 
 
     <ion-view title="Page 3"> 
 
     <ion-content class="padding"> 
 
      <!-- The content of the page --> 
 
      <a class="button" ui-sref="page1">Go To Page 1</a> 
 
      <a class="button" ui-sref="page2">Go To Page 2</a> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script>  
 
    </body> 
 
</html>

來源

2015-05-26 19:54:03 Nikola

您好@Nikola我剛剛看到您的回答，我嘗試失敗，請您看看我的問題？我會很感激，謝謝！ http://stackoverflow.com/questions/35439595/different-header-on-web-and-ios-ionic –

@AlejandroLora你有沒有嘗試過我的方法如下？ – QueryLars

@QueryLars是的，它不起作用。我昨天晚上修好了，用margin-top代替增加了頂級屬性。所以，我有top：44px，我想top：66px，所以我添加了22px的邊距，它在iPad上完美運行。謝謝！ –

你只需要重寫離子的默認樣式。你可以在你的styles.css添加以下行實現這一點：

.bar-header { 
    height: 70px; /*just an example*/ 
}

要垂直對齊頁面的標題也補充一點：

.bar-header .title { 
    line-height: 70px; 
}

最後調整頁面的內容：

做

.has-header { 
    top: 70px; 
}

來源

2015-05-26 20:01:09 QueryLars

這應該是它的簡單接受的答案，並很好地解釋。 – Sebastian

最好的辦法是使用薩斯（.scss代替的CSS）和index.scss覆蓋爲變量$bar-height的默認值。

$bar-height: 80px; 

@import "../../bower_components/ionic/scss/ionic.scss"; 

/* Your css here */

來源

2016-07-20 14:03:28 Tiagojdferreira

如何改變離子的導航欄大小？

回答

相關問題