web-dev-qa-db-ja.com

イオンタイトルの色を変更するにはどうすればよいですか？

ionic 2.でイオンタイトルの色を変更しようとしました.

私はこの次のコードを持っています：

<ion-header>
  <ion-navbar>
   <ion-title primary>Title</ion-title>
  </ion-navbar>
</ion-header>

ion-titleの色は変わりません。私は次のようないくつかのことを試します：

<ion-title color="primary">Title</ion-title> 
<ion-title> 
    <p primary>Title</p>
</ion-title>

2番目のタイトルでは、タイトルの色が適切ですが、ヘッダーが大きくなっています。それで、これをvariables.scssに追加します。

$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem;  // Android

しかし、何も変わりません。誰にも解決策はありますか？または、pまたはhタグを使用して色を変更する必要がありますか？

htmlionic-frameworksassionic2ionic3
11
CoCoNours

color="..."要素からion-titleを削除し、variables.scssファイルでこのsass変数を使用します。

$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;

名前付きの色変数に含まれる色を使用する場合

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  ...

  custom:     #777
);

次のようにmap-getを使用して実行できます。

$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);

注：

justで色を設定するcolor属性は、3.0.0バージョンのIonic 詳細info 。

更新：

[...]ナビゲーションバーのすべての要素の色が変わります。イオンタイトルを変更するだけですか？または、他の要素を変更するための2番目の変数がありますか？

このスタイルルールをapp.scssファイルに追加して（グローバルにする）、タイトルのみを変更し、それ以外は変更しません。

.toolbar-title.toolbar-title-md, 
.toolbar-title.toolbar-title-ios, 
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }
20
sebaferreras

この質問には答えられましたが、タイトルにテキストの色を設定する別の方法は、variables.scssファイルにあります。

$colors: (
    calm: (
      base: #000,
      contrast: #ffc900
    ),
   etc..
);



<ion-navbar color="calm">
    <ion-title>Some Text</ion-title>
</ion-navbar>

ベースは背景色になり、コントラストはテキスト/アイコンの色になります

6
Thomas Degroot