Question

由于平台的工作方式，导航栏为Android提供了默认大小，为iOS提供了另一个大小。我需要在Android版本中使nav-var更大，以达到所需的审美目的。到目前为止，我只能用CSS改变文本大小和颜色，但不能改变条形本身的大小。

是否可以通过设计进行更改或不可更改？

Answer 1

您只需要覆盖离子的默认样式。您可以通过在styles.css中添加以下行来实现此目的：

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

要垂直对齐页面标题，请添加以下内容：

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

最后调整页面内容：

.has-header {
   top: 70px;
}

Answer 2

当然，你可以改变离子的任何视觉方面。以下是CodePen的工作示例。

因此，我将该类添加到标题中并添加了适当的样式。另外，我添加了!important; CSS规则。从CodePen粘贴的代码副本：

＆＃13;

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) {
  
})

＆＃13;

.mynavbar{
  height: 200px !important;
}

＆＃13;

<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>

＆＃13;

Answer 3

最好的方法是使用Sass（.scss而不是.css）并覆盖$bar-height上变量index.scss的默认值。

$bar-height: 80px;

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

/* Your css here */

如何改变离子导航尺寸？

3 个答案: