Ionic 2のnavbarの背景色を変更するにはどうすればよいですか？

は私がクラス=「バーバー・安定」などのように、多くのことを試してみましたイオン2のナビゲーションバーの背景色を変更しようとしているIonic 2のnavbarの背景色を変更するにはどうすればよいですか？

は今の私のコードは次のようになります。

<ion-navbar *navbar>

try this

イオン1におけるuは、このように行うことができます。

だから背景には、（デフォルト）イオン2については

出典

2015-12-04 Tyler Ruby

現在灰色です。ここ外観：Ionic header

他の方法

CSS：

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

HTML：あなたに、この便利

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

希望。

出典

2015-12-04 08:31:32

私はImはイオン2の代わりに、イオン1例を使用しているので、これは間違っていると思います。 –

これは動作します：

<ion-navbar secondary *navbar>

アプリ/テーマディレクトリ内app.variables.scssでいくつかの定義済みの変数があります：A Guide to Styling an Ionic2 Application：

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

は、私は、次の資料からこれを考え出しました。

出典

2016-02-11 13:15:02 srihari

navbarには独自のスタイルがあります。あなたはそれを上書きする必要があります。

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

出典

2016-04-29 12:19:07 CESCO

をこれは、この質問に対する正しい答えでなければなりませんイム：

$toolbar-background: $primary;

–

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

もSCSSからなど、二次的、または他の色だろう。

出典

2016-04-29 13:51:07

Danありがとう、ありがとう！ –

残念ながら、これはもはや（10/25/16のように - ionic -version = 2.1.4）Ionic2の最新バージョンで動作しているように見えます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",

あなたのsrc /テーマ/変数にカスタムスタイルを追加することができ、イオン2から

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

出典

2016-10-27 03:04:24 Russ

：、私はapp.scssに以下を追加する必要がありましたこの問題を解決します。その後、SCSSファイル

そして、あなたは

をしたいクラスは今

結果を参照してください追加

参考：

$toolbar-background: blue;

は、これが効果的に値が使用されている場所の色を変更します。Theming your Ionic App

出典

2016-11-18 06:37:31

今（RC4）これを行うための正しい方法は/src/themes/variables.scssファイルを変更し、追加することです。詳細情報here

出典

2017-01-15 23:24:01 veljkoz

実際、ツールバーには他にも多くのプロパティがあります。つまり、 '$ toolbar-background $ toolbar-border-color $ toolbar-text-color $ toolbar-active-color $ toolbar-inactive-color' –

ここで私はionic2フォーラムで発見し、それは私のために働いていた答えだ：

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

出典

2017-05-30 01:58:27 Spilot

私は色の属性を使用して、ヘッダーのための解決策を見つけるにはナビゲーションバーで、次のよう：サイドメニューのツールバーの背景の

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

、ファイルをvariables.scssし、このコードを追加するために行く：

0イオン - ナビゲーションバーではないイオンナビゲーションバーを使用して

出典

2018-01-27 19:15:42

Ionic 2のnavbarの背景色を変更するにはどうすればよいですか？

答えて

関連する問題