Come modificare la dimensione della barra di navigazione di ionic?

La barra di navigazione viene fornita con una dimensione predefinita per Android e un'altra per iOS a causa del funzionamento delle piattaforme. Ho bisogno di rendere il nav-var più grande nella versione Android per fini estetici richiesti. Finora sono stato in grado di modificare solo la dimensione del testo e del colore con i CSS, ma non le dimensioni della barra stessa.Come modificare la dimensione della barra di navigazione di ionic?

È possibile modificarlo o è inalterabile per progettazione?

fonte

2015-05-26 David Prieto

Certo, è possibile modificare qualsiasi aspetto visivo in ionico. Ecco un esempio operativo da CodePen.

Quindi, ho aggiunto la classe all'intestazione e aggiunto uno stile appropriato. Inoltre, ho aggiunto la regola CSS !important;. La copia del codice incollato da CodePen qui:

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>

fonte

2015-05-26 19:54:03 Nikola

Ciao @Nikola Ho appena visto la tua risposta e ho provato senza successo, potresti per favore dare un'occhiata alla mia domanda? Lo apprezzerei, grazie! http://stackoverflow.com/questions/35439595/different-header-on-web-and-ios-ionic –

@AlejandroLora Hai provato il mio approccio descritto di seguito? – QueryLars

@QueryLars Sì, e non funziona. Ho riparato ieri sera, usando margin-top invece di aumentare la proprietà superiore. Così, ho avuto il massimo: 44px, volevo il massimo: 66px, quindi aggiungo un margine superiore a 22px e funziona perfettamente su iPad. Grazie! –

Non vi resta che sostituire lo stile predefinito di ionica. È possibile raggiungere questo obiettivo aggiungendo le seguenti righe nel vostro styles.css:

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

Per allineare verticalmente il titolo della pagina anche aggiungere questo:

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

E infine per regolare il contenuto della pagina:

.has-header { 
    top: 70px; 
}

fonte

2015-05-26 20:01:09 QueryLars

questa dovrebbe essere la risposta accettata per la sua semplicità e ben spiegato. – Sebastian

modo migliore per farlo è quello di utilizzare Sass (.scss invece di css) e sostituire il valore di default per la variabile $bar-height su index.scss.

$bar-height: 80px; 

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

/* Your css here */

fonte

2016-07-20 14:03:28 Tiagojdferreira

Come modificare la dimensione della barra di navigazione di ionic?

risposta

Problemi correlati