logo标签列表

如何更改ionic的导航栏大小？

cssionic-framework
5
由于平台工作方式的不同，Android和iOS版本具有默认大小。为了满足美学需求，我需要在Android版本中增大导航栏。目前，我只能通过CSS修改文本的大小和颜色，而无法修改导航栏本身的大小。请问是否可以更改大小或者是设计上不可更改的？
3个回答
21

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

```css /* 请将此代码添加到styles.css文件底部 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ``` 
.bar-header {
   height: 70px; /*just an example*/
}

为使页面标题垂直居中，还需添加以下代码：

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

最后，调整页面内容：

.has-header {
   top: 70px;
}
1
这应该是被接受的答案，因为它简洁明了且解释得很好。 - Sebastian
6
当然，你可以在Ionic中更改任何视觉方面。这是一个来自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>

嗨@Nikola，我刚看到你的回答并尝试了但没有成功，你能否请看一下我的问题？我会很感激的，谢谢！ http://stackoverflow.com/questions/35439595/different-header-on-web-and-ios-ionic - Alejandro Lora
@AlejandroLora 你尝试过我下面描述的方法吗？ - LarsBauer
@QueryLars 是的，但它不起作用。昨晚我修复了它，使用margin-top代替增加top属性。所以，我的top是44px，我想要top是66px，所以我添加了一个22px的margin top，现在在iPad上完美地工作了。谢谢！ - Alejandro Lora
3

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

$bar-height: 80px;

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

/* Your css here */
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接