Question

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

上面的代码为我提供了离子的默认视图，我需要更改标题的颜色，保留默认的导航控制器（如菜单/后退图标），而不是如下所示定义新的标题栏。

<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

对于离子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>

Answer 2

只需制作任何css类

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

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

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

Answer 3

您可以添加此行

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

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

有一个插件：link

此外，如果您只想更改标题的颜色，请为css / scss添加以下行：

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

或

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

或其他什么 =）

更改默认导航栏的颜色而不会丢失导航控件

3 个答案: