在不丢失导航控件的情况下更改默认 nav-bar 的颜色

Question

<ion-view view-title="Title">
  <ion-content>
  Content Here
  </ion-content>
</ion-view>

上面的代码给了我 ionic 的默认视图我需要更改 header 的颜色，保留默认的导航控制器（如 menu/back 图标）而不是定义一个新的 header 栏如下。

<ion-view view-title="Title">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-content>
 Content Here
</ion-content>
</ion-view>

有解决问题的简洁方法吗？

Answer 1

任意cssclass

.your-sample-class{
  background: #color-code !important
}

并以这种方式将 class 添加到项目的导航栏中：

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>

Answer 2

您可以添加此行

<preference name="StatusBarBackgroundColor" value="#078ECD"/>

到文件 config.xml 以编辑状态栏面板的颜色

它有一个插件：link

此外，如果您只想为 header 更改颜色，请为您的 css/scss 添加这些行：

ion-header-bar {
  background-color: red;
}

或

.bar.bar-positive {
  background-color: red;
}

或其他 =)

Answer 3

对于 ionic 2，您可以像这样更改导航栏的背景颜色您可以添加自定义颜色 http://ionicframework.com/docs/v2/theming/theming-your-app/

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Connection Bluetooth</ion-title>
        <ion-buttons end>
            <button (click) = "startScanning()" ion-button>
                <!--<ion-icon name="refresh-circle"></ion-icon>-->
                <!--SCAN-->
                <ion-icon name='refresh'  md="md-refresh"></ion-icon>

            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

在不丢失导航控件的情况下更改默认 nav-bar 的颜色

Change color of default nav-bar without losing navigation controls

ionic-framework

ionic

ionic-view