web-dev-qa-db-ja.com

ionicでイオンビューヘッダーの色を変更する

ionicスターターメニューバーテンプレートを使用しています。各ページのヘッダーの背景色を変更したいです。

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

ただし、まったく機能しません（コンテンツはレンダリングされません）。 ヘッダーのドキュメント は役に立ちません。これを行う正しい方法は何ですか？

cssionic-frameworkionic
23
poiuytrez

これを行ういくつかの方法：

  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スタイルを使用して、背景色（およびその他のプロパティ）を更新することもできます。

    メインnavbar：

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

56
brandyscarney

これに対する明確な解決策を見つけることができませんでしたが、ハックの1つは$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');
            }
        }
    });
});

フィドル

[〜＃〜] edit [〜＃〜]アイデアはサイドバーテンプレートでも同じですが、

更新されたフィドル

行に注意してください

<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. ここでは、どのページがexをアクティブにしているのかを確認するために状態名がチェックされます。 app.search
  2. 次に、要件に応じて、特定のカラークラスが割り当てられ、他のカラークラスが削除されます。

イオン色のオプション

お役に立てれば。

3
shakib

CSSで動作するようにしました：

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

つまり、このCSSでAngular生成されたヘッダークラ​​スを直接参照するだけです。これが役立つことを願っています！

1
hooligan

私のニーズに合わせて@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
    };

この場合、ionic落ち着いた色と私が定義したピンク色の2色しかありません。

1
Tenoch G

異なる状態を使用しており、各状態に$scope.stateone = "true"などの$ scope変数以外のものがある場合は、ion-nav-barでng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"を使用します。 ng-classは、クラスと式を受け取ります。式は、割り当てられたクラスである式のいずれかが真です。任意のブール式でng-classを使用できます。これは、各ページで異なる色を使用する方法です。

1
Jess Patton
//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%;
 }
0
user4423251

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

３。オンセレクトを_ion-tab_タブに追加して、タブが選択されるたびに関数を呼び出すようにします：<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>

4。退出時に色をある値に戻したい場合は、_ion-tab_も選択解除してください。

5。楽しんで！

0
Marcelo Lazaroni

次のコードを使用してみてください。

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

$bar-stable-text color（_variables.scssからionic libから取得）をオーバーライドできます

たとえば、scssの変更

$bar-stable-text: green !default;
0
nium

これらの行を、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%;
}
0
user4423251

アプリ内でscssを使用している場合は、独自のカスタムバークラスを作成し、そのクラスで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);
        }
    }
}

クラスを定義した後、ion-nav-barディレクティブで新しいカスタムバークラスを使用できます。

<ion-nav-bar class="bar-custom">
    <ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
0
Önder Ceylan