web-dev-qa-db-ja.com

Ionic 2でナビゲーションバーの背景色を変更するにはどうすればよいですか？

Ionic 2。でナビゲーションバーの背景色を変更しようとしています。class= "barbar-stable"など、さまざまなことを試しました。

現在、私のコードは次のようになっています。

<ion-navbar  *navbar>

したがって、背景は現在灰色です（デフォルト）

cordovamobileionic-frameworkionicionic2
9
Tyler Ruby

from ionic 2 src/theme /variables.scssファイルにカスタムスタイルを追加できます

enter image description here

そして、必要な場所にクラスを追加します

enter image description here

enter image description here

結果を見る

enter image description here

参照： テーマを設定するIonicアプリ

9
Sanjoy Kanrar

ナビゲーションバーには独自のスタイルがあります。 SO上書きする必要があります。

.toolbar-background {
  background-color: #0c60ee;
}
7
CESCO

Ionic 2： これを試してください

in ionic 1 uはこの方法で実行できます。ここを見てください： Ionicヘッダー

他の方法

css：

.theme-color {
background-color: ##009688 !important;
color: #ffffff;}

html：

   <ion-nav-bar class="theme-color"><ion-nav-bar>

これがお役に立てば幸いです。

4
the_mahasagar

現在（rc4）これを行う正しい方法は、/src/themes/variables.scssファイルを変更し、以下を追加することです。

$toolbar-background: blue;

これにより、値が使用される場所の色が効果的に変更されます。詳細 ここ

3
veljkoz

ナビゲーションバーで次のようにcolor属性を使用して、ヘッダーの解決策を見つけます。

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

サイドメニューのツールバーの背景については、variables.scssファイルに移動し、次のコードを追加します。

$toolbar-background: $primary;
1
Monty Al Mohaisen

これは機能します：

<ion-navbar secondary *navbar>

App/themeディレクトリのapp.variables.scssにはいくつかの事前定義された変数があります。

 $colors: (
    primary:    #387ef5,
      secondary:  #32db64,
      danger:     #f53d3d,
      light:      #f4f4f4,
      dark:       #222,
      favorite:   #69BB7B
    );

私は次の記事からこれを理解しました： Ionic2アプリケーションのスタイリングのガイド 。

1
srihari
<ion-nav-bar primary></ion-nav-bar>

二次など、またはscssからの他の色である可能性もあります。

0
Dan Bucholtz

これが私がionic2フォーラムで見つけた答えです、そしてそれは私のために働きました：

ナビゲーションバーヘッダーの背景色を変更するIonic 2： https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498 ==

0
Spilot

残念ながら、これは最新バージョンのIonic2（2016年10月25日現在-ionic -version = 2.1.4）では機能しないようで、package.jsonに次の依存関係があります。

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

これを解決するには、app.scssに以下を追加する必要がありました。

.toolbar-background {
  background-color: blue;
}
0
Russ