web-dev-qa-db-ja.com

ionic 2？でイオンヘッダーの背景色を変更するには？

ヘッダーの色を変更するには？私は以下を試しましたが、成功しませんでした

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

私のvariable.scssは次のとおりです。

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);
cssionic-frameworksassionic2ionic3
14
Pawan

テーマフォルダーの下/内のvariables.scssで必要に応じて、グローバルに変更できます。

$toolbar-background: blue;

すべての参照についてIonicオーバーライドするSASS変数はこれに従います link

41
Yasir
 <ion-header>
  <ion-navbar color="color3">
    <ion-title></ion-title>
  </ion-navbar> 
</ion-header>

次のようにsrc/theme/variable.scssでカスタムカラーを設定できます。

$colors: (
  primary:    #8B4789,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  color1: #15c178,
  color2: #8B4789,
  color3 : #07904d,
  color4: #673665,
  brown: #B75E33,
  ycBlue: #638AF1
);

これがあなたのために働くことを願っています

17
Devansh sadhotra

公式ドキュメント を確認してください。 $colorsマップからキーを取得するcolor属性があります。

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>
7
Suraj Rao

次のように色を設定します。

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>
4
sebaferreras