イオンアプリのタブの色を変更するには？

Question

私は、タブのアクティブな色をカスタム色に変更したいと思います。 可能であれば、アイコンの色も変更したいと思います。

現在のところ、私が使用しているタブはカラーポジティブで残りのタブはグレーです。

イオン性ではなく、CSS天才のあなたの場合、 ionicには、いくつかのデフォルト設定色があります（例：陽性=青、陰性=赤）。ここで

は、私がこれまで持っているものです。

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">  

<!-- Home Tab -->  

<ion-tab title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home"> 
    <ion-nav-view name="app-home"></ion-nav-view> 
    </ion-tab> 

CSS：

.tabs-color-active-positive, .tabs { 
color: #c49137 !important; 

} 

私はCSSコードとdeclartionsの周り混乱しているが、それはしません違いが生じる・異なる。

Answer 1

まず、.tabsは何も指していません。したがって、CSSセレクタから修正または削除する必要があります。他の2つの要素をターゲットにする場合は、それらにクラスを追加する必要があります。

通常、透明な背景を持つアイコンの色は、変更されます。&は.PNGとして作成されます。彼らは黒から青に変更する方法を参照するには、これらのフォント恐ろしいアイコンの色を変更してみてください：https://fortawesome.github.io/Font-Awesome/icons/

今のコードを修正する：

私は例から欠落している</ion-tabs>タグが存在すると仮定上記。だからここで追加しました。追加クラスを追加しました。<ion-tab> & <ion-nav-view>です。 .tabクラスを使用すると、jQueryまたはCSSを使用して複数のタブをグループ化することができます。

HTML：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">  
    <ion-tab class="tab tab-home" title="Home" icon-off="ion-home" icon-on="ion-android-home" href="#/app/home"> 
     <ion-nav-view class="nav-view-home" name="app-home"></ion-nav-view> 
    </ion-tab> 
</ion-tabs> 

.tabs-icon-topクラス名は、ルートクラス名です。オプションです。 CSSコード/色が.tabまたは.tab-homeのクラス名が適用されているページのどこにでも流出しないように、これを使用することをお勧めします。これらのCSSセレクタのいずれか1つを使用することができます。&このスタック全体は必要ありません。彼らは右に進むにつれて、より具体的になります。 （必要に応じて、1行目、2行目または3行目をコンマで自由に削除してください。&））

CSS：

.tabs-icon-top .nav-view-home { 
    color: #c49137; 
} 

：個々のタブを選択し

.tabs-icon-top .tab { 
    color: #c49137; 
} 

またはこの：

.tabs-icon-top, 
.tabs-icon-top .tab, 
.tabs-icon-top .tab .nav-view-home { 
    color: #c49137; 
} 

また、名前空間されているタブのすべてを選択するために、これを使用することができます

Answer 2

Sassを使用している場合は、CSSファイルに次のように入力します。

ion-tabs { 
    @include tabs-standard-color('tabs-color-active-[custom name here]', 
    [main color], [color if not selected]); 
} 

この方法では、既存のスタイルを上書きしないで、カスタムクラスを作成することもできます。また、その色を使用するすべての要素を変更するには、$positiveを無効にすることもできます。

私はCSSを取得することができたサスから

---

、それはかなり見ていませんが、それはトリックを行う必要があります。

ion-tabs.tabs-color-active-custom .tab-item { 
    color: [inactive color]; 
} 

ion-tabs.tabs-color-active-custom .tab-item.tab-item-active, ion-tabs.tabs-color-active-custom .tab-item.active, ion-tabs.tabs-color-active-custom .tab-item.activated { 
    color: [active color]; 
}