web-dev-qa-db-ja.com

色のナビゲーションバーヘッダーを変更するIonic 2

私はこの問題を抱えています...私の色は今白です、私のコードは次のようです：

<ion-header >
  <ion-navbar>
    <ion-title>
      HELLO
    </ion-title>
  </ion-navbar>
</ion-header>

このオプションで色を変更するのは簡単です（一次、二次、危険、明るい、暗い）

<ion-header >
      <ion-navbar danger>
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

しかし、私の問題は、カスタムカラーを使用したい場合です。誰かが私がそれを解決する方法を知っていますか？前もって感謝します。

宜しくお願いします。

cssionic-frameworksassionic2ionic3
6
Tecnico

これを行うには、1つのページでのみ色を変更するか、アプリのすべてのページで色を変更するかに基づいて、2つの方法があります。

1）単一のページ/ビューで変更する

あなたが見ることができるように ここ

テーマを変更するには、$colorsファイルのsrc/theme/variables.scssマップを微調整するだけです。

$colors: (
  // ...
  newcolor:    #55acee

)

そしてそれをビューで使用します

 <ion-header>
      <ion-navbar color="newcolor">
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

2）すべてのページ/ビューで変更します

この場合、Ionicのデフォルトを上書きするには、variables.scssファイルに以下を追加する必要があります。

$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;

編集

こんにちは、app/theme/app.variables.scssにグラデーションを追加するにはどうすればよいですか？

src/theme/variables.scssで使用する色を追加できます。

$header-first-color: #AAAAAA;
$header-last-color: #000000;

次に、それを使用するルールを設定します（すべてのページに適用する場合は、app.scssファイルで、単一のページに適用する場合は、page-name.scssファイルで）：

ion-header {
    .toolbar-background {
        background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
    }
}
19
sebaferreras

variables.scssファイルのionic変数を上書きする方がよい場合があります

したがって、カスタムカラー変数を作成できます

 $new-color:#55acee;

そしてそれをionic variableに渡します

$toolbar-ios-background:($new-color);
$toolbar-md-background($new-color);
$toolbar-wp-background($new-color);

すべてのionic変数 ここ

4
user1752532