1

ねえ、私は ionic2 で todo リスト アプリを作成しています。サイドバー リストがあります。list.html には、次のコードがあります。

<ion-navbar *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title class="listTitle">My First List</ion-title>
</ion-navbar>

cssで「My First List」の色を白に変更しようとしています。しかし、それは機能していません。また、タイトルの背景色を定義しましたが、メニュー アイコンを上書きします。何故ですか？

CSS:

.listTitle
{
    background-color : #58B43F;
    color : #ffffff !important;
    box-shadow : 0px 6px 10px #888888;
}

私の予想される結果は、ナビゲーション バーが緑色になり、白いタイトルと白いメニュー アイコンが表示されることです。どうすればいいですか？

ありがとう。

4

1 に答える 1

2

Ionic 2 は、キーワードを使用してファイルから SASS 変数を参照しapp.variables.scssます。これは、タグに属性として直接追加できます。primaryこれを使用して、緑とsecondary白に変更できます。

$colors: (
  primary:    #58B43F,
  secondary:  #fff,
  ...
);

secondarycolor 属性をタグに適用しようとすると、何らかの理由で機能しませんでしたion-titleが、ネストされたテキスト タグは正常に機能します (例: <p>)。

したがって、以下は、これらのカラー エイリアスを使用してスタイルを設定する方法です(タグ宣言内のどこにおよびエイリアスが配置されているかion-navbarに特に注意してください)。primarysecondary

<ion-navbar primary *navbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title>
    <p secondary>My First List</p>
  </ion-title>
</ion-navbar>

編集: その他のカスタマイズ

navbar の高さを調整するには、これらを に追加しapp.variables.scssます。

$toolbar-ios-height: 8rem; // ios
$toolbar-md-height: 8rem;  // android

新しい font-family を使用するには、ion-navbarスタイルをオーバーライドします。

ion-navbar {
  font-family: 'MyFontFamily';
  text-transform: uppercase;
  letter-spacing: 0.14em; 
}
于 2016-02-13T07:47:44.737 に答える