どのように私はイオン3</p> <p><a href="https://i.stack.imgur.com/Sxzlm.jpg" rel="nofollow noreferrer">the menu that I want to build</a></p> <p>で色付きのナビゲーションバーを作成しようとしている3

Question

イオンのUM作るカラフルなタブは、すでに各イオンのタブのスタイルを使用しようとしたが、それは動作しませんでした、私はまた、Ionic Sass変数をオーバーライドしようとしましたが、私も成功しませんでした。誰か助けてくれますか？

は、私がvariables.scssに生成されたHTMLとコードこれを確認あなた

Answer 1

You can give a different color to tab like this. 
<ion-tabs> 
     <ion-tab color="primary"></ion-tab> 
     <ion-tab color="secondary"></ion-tab> 
</ion-tabs> 

Declare a color in theme/variables.scss 
Like : 

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

Answer 2

ありがとう：

タブ-T0-xは、タブのxのID、そうでないかもしれないが最善です

.tab-button.icon-only#tab-t0-0{ 
    background-color: #fcaf17; 
} 

.tab-button.icon-only#tab-t0-1{ 
    background-color: #f37043; 
} 

.tab-button.icon-only#tab-t0-2{ 
    background-color: #ef4056; 
} 

.tab-button.icon-only#tab-t0-3{ 
    background-color: #46c3e6; 
} 

.tab-button.icon-only#tab-t0-4{ 
    background-color: #88c240; 
} 

$tabs-md-tab-icon-color : #FFFFFF; 
$tabs-md-tab-icon-color-active : #272525; 

私の問題を解決しました。