在Ionic中更改ion-view标题栏颜色

Question

我正在使用ionic starter menubar模板。我想要更改每个页面的标题背景颜色。当前代码如下：

<ion-view view-title="Search">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

我尝试过：

<ion-view view-title="Search" class="bar bar-header bar-assertive">
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

然而它完全不起作用（内容未呈现）。 头部文档 对我没有帮助。那么正确的做法是什么？

- poiuytrez

---

你有没有修改 index.html 文件中的 ion-nav-bar 标签中的类？例如：<ion-nav-bar class="bar-positive">。 - shakib

我正在尝试让每个页面都有不同的颜色，而不是每个页面都相同的颜色。 - poiuytrez

Answer 1

以下是一些方法：

1. 您可以在每个视图中添加ion-nav-bar。

   <ion-view view-title="Page 1">
     <ion-nav-bar class="bar-balanced">
       <ion-nav-back-button></ion-nav-back-button>
     </ion-nav-bar>
     <ion-content>
       ...
     </ion-content>
   </ion-view>
   

   Codepen示例

2. 你还可以使用ng-style更新背景颜色（以及其他属性）

   主要导航栏：

 <ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}">
    <ion-nav-back-button></ion-nav-back-button>
  </ion-nav-bar>

CSS：

.nav-bar-block, .bar {
  background-color: inherit !important;
}

控制器：

$scope.$on('$ionicView.beforeEnter', function() {
    $rootScope.viewColor = 'green';
}); 

Codepen示例

- brandyscarney

---

你需要在每个ion-nav-bar中添加菜单按钮，因为你正在为每个视图重新定义导航栏。 - Brandy Carney

@NiravGandhi，为了看到菜单按钮，您可以使用以下代码片段：<ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> </button> </ion-nav-buttons> - hswner

Answer 2

我无法找到一个干净的解决方案，但是一个hack的方法可能是使用$stateChangeStart事件并手动设置类名。

angular.module('starter')
.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-header-bar'));
            switch(next.name) {
                case 'tab.chats':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-calm');
                    break;
                case 'tab.dash':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-balanced');
                    element.addClass('bar-positive');
                    break;
                default :
                    element.removeClass('bar-calm');
                    element.removeClass('bar-positive');
                    element.addClass('bar-balanced');
            }
        }
    });
});

这里是 fiddle 链接

编辑 侧边栏模板的思路也是一样的。

更新后的 fiddle 链接

注意这行代码：

<ion-nav-bar class="bar-positive">

在menu.html模板中，它表示基本头部颜色类。但是在后续更改页面即状态头部颜色时，需要在$stateChangeStart事件中手动更改。

代码：

.run(function ($rootScope) {
    var element;
    $rootScope.$on('$stateChangeStart', function (event, next) {
        if (next.name) {
            element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            console.log(element);
            switch(next.name) {
                case 'app.search':
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-dark');
                    element.addClass('bar-assertive');
                    break;
                case 'app.browse':
                    element.removeClass('bar-calm');
                    element.removeClass('bar-assertive');
                    element.removeClass('bar-dark');
                    element.addClass('bar-energized');
                    break;
                default :
                    element.removeClass('bar-positive');
                    element.removeClass('bar-energized');
                    element.removeClass('bar-assertive');
                    element.addClass('bar-dark');
            }
        }
    });
});

1. 在这里，检查状态名称以查看哪个页面正在激活，例如app.search
2. 然后根据需求分配特定的颜色类别，删除其他颜色类别。

Ionic颜色选项

希望这能帮到您。

- shakib

---

我正在使用菜单栏模板而不是标签模板。我不关心在HTML中直接设置每个视图的类。但是，我应该在哪里设置这个类？ - poiuytrez

Answer 3

我们在CSS中使用以下代码使其正常工作：

.title.title-center.header-item {
    background-color: black;
    margin: 0px;
}

这意味着我们只需直接使用CSS引用Angular生成的头部类。希望这有所帮助！

- hooligan

Answer 4

如果您正在使用不同的状态，并且每个状态都有不同的控制器，则只需使用类似于$scope.stateone = "true"等的$scope变量。然后在ion-nav-bar上使用ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"。ng-class接受类和表达式，任何为真的表达式都将被分配为类。您可以使用ng-class与任何布尔表达式一起使用。这就是您可以在每个页面上具有不同颜色的方法。

- Jess Patton

---

不幸的是，这对于ion-nav-bar无效，因为子ion-header-bar不会随父类一起更新。 - Brandy Carney

啊，我明白了，那真是不幸。 - Jess Patton

Answer 5

我修改了@shakib的解决方案以适应我的需求，在我的情况下，用户通过点击应用程序标志来设置主题，因此栏颜色应更改。如果您遇到这种情况，则不需要执行switch case，因为您希望更改所有视图。

$rootScope.$on("$stateChangeStart", function (event, toState) {
          var element;
          if (toState.name){
              element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
              if (debugMode) console.log(element);
              // I get the bar-class from my localStorage where I keep the user settings
              var saved_bar_class = $localStorage.get('bar-class','bar-calm');

              element.removeClass('bar-pink');
              element.removeClass('bar-calm');
              element.addClass(saved_bar_class);
          //    Here We could use a Switch Case on toState.name to put a different color to each state

          }
      });

当用户点击应用程序标志时，我希望立即更改栏颜色，以便向用户反馈该按钮的作用。由于我们尚未更改状态，因此上述代码无法实现此目的。要解决此问题，只需将以下代码添加到您的“更改主题”函数中。

$scope.changeAppTheme = function () {
        var element;
        element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
            // some code to select the theme
            element.removeClass('bar-pink');
            element.removeClass('bar-calm');
            element.addClass('bar-pink');
            // some other code
    };

在这种情况下，我只有两种颜色，离子平静和我定义的粉色。希望这能帮助到某人。

- Tenoch G

Answer 6

您可以覆盖$bar-stable-text color（从ionic lib的_variables.scss中获取）

例如，在您的scss文件中更改：

$bar-stable-text: green !default;

- nium

Answer 7

尝试使用以下代码：

<ion-view>
  <ion-header-bar class="bar-assertive">
    <h1 class="title">Search</h1>
  </ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

- LarsBauer

---

您的代码生成了一个没有指定颜色（灰色）的空标题。 - poiuytrez

Answer 8

将这些行放在你的 Ionic 项目的 /www/css/ 目录下的 style.css 文件中。

.title.title-center.header-item {
    background-color:#4a87ee;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
}

- user4423251

Answer 9

//add these lines in your style.css file under /www/css/ yoyr project    directory
 .title.title-center.header-item {
    background-color:#30393A;//#F38023!important; // for bg color
    margin:0px!important;
    margin-left:0px!important;
    color: #ffffff!important;
    text-align: center !important;
    width: 100%;
 }

- user4423251

Answer 10

如果您在应用程序中使用scss，可以创建自己的自定义bar类并在其中使用ionic的bar mixins。

$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);

.bar {
    &.bar-custom {
        @include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
        &.bar-footer{
            background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
        }

        .button {
            @include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
            @include button-clear(#fff, $bar-title-font-size);
        }
    }
}

在定义完你的类之后，你可以通过 ion-nav-bar 指令使用你的新自定义 bar 类。

<ion-nav-bar class="bar-custom">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>

- Önder Ceylan