在 ionic 中更改 ion-view header 颜色

Question

我正在使用 ionic 入门菜单栏模板。我想更改每个页面的 header 背景颜色。我目前有：

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

但它根本不起作用（内容未呈现）。 header documentation 对我没有帮助。这样做的正确方法是什么？

Answer 1

尝试使用以下代码：

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

Answer 2

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

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

编辑侧边栏模板的想法相同，

Updated fiddle

注意行

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

在menu.html模板中，表示基础header颜色class。但随后对页面的更改即声明 header 颜色需要在 $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');
            }
        }
    });
});

这里检查状态名称以查看哪个页面正在激活 ex。 app.search
然后根据要求分配特定颜色 class 删除其他颜色 classes.

ionic color options

希望这对您有所帮助。

Answer 3

一些方法可以做到这一点：

您可以将 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 example

您还可以使用 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 example

Answer 4

如果您使用不同的状态，并且每个状态都有不同的控制器，而不是像 $scope.stateone = "true" 这样的 $scope 变量，那么在您的 ion-nav-bar 上使用 ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"。 ng-class 采用 classes 和一个表达式，无论哪个表达式为真，即分配的 class。您可以将 ng-class 与任何布尔表达式一起使用。这就是您可以在每个页面上使用不同颜色的方法。

Answer 5

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

例如，在你的 scss 中更改

$bar-stable-text: green !default;

Answer 6

我修改了@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

          }
      });

此外，当用户单击应用程序徽标时，我想立即更改栏颜色，以便向用户反馈该按钮的作用。上面的代码不会这样做，因为我们还没有改变状态，要解决这个问题只需将这段代码添加到您的 'change theme' 函数

$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
    };

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

Answer 7

如果你想改变 ion-nav-bar 这个很有用：

1。创建一个主控制器来处理您的索引页面和其中的所有视图。 2. 将此功能添加到控制器：

$scope.setNavColor = function(color){
    for(var i =0; i <  document.getElementsByTagName("ion-header-bar").length; i++){
      classNames = document.getElementsByTagName("ion-header-bar")[i].className;
      classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
      document.getElementsByTagName("ion-header-bar")[i].className = classNames;
    }
  }

3。将 on-select 添加到您的 ion-tab 选项卡，以便在您选择选项卡时调用该函数： <ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4。如果您希望颜色在您离开时恢复到某个值，也可以为您添加 on-deselect ion-tab。

5。玩得开心！

Answer 8

我们在 CSS 中使用了：

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

这意味着我们直接用这个CSS引用Angular生成的头文件类。希望这对您有所帮助！

Answer 9

将这些行放在离子项目 /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%;
}

Answer 10

//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%;
 }

Answer 11

如果您在应用中使用 scss，您可以创建自己的自定义栏 class 并在其中使用 ionic 的栏混合。

$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);
        }
    }
}

定义 class 后，您可以使用带有 ion-nav-bar 指令的新自定义栏 class。

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

在 ionic 中更改 ion-view header 颜色

Change ion-view header color in ionic

css

ionic-framework

ionic