離子2 - 如何風格導航欄

我需要我的樣式離子2應用程序的導航欄。

我發現了矛盾的信息。

看來你可以做這樣的事情之前：

<ion-navbar *navbar primary>

但現在不一樣..

對我來說，我需要給一個背景，修改文本的顏色。

我設法改變這個類的樣式背景色：toolbar-background

.toolbar-background { 

    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#00aaff), to(#009eb9)); 
    background-image: -webkit-linear-gradient(top, #00aaff, 0%, #009eb9, 100%); 
    background-image: -moz-linear-gradient(top, #00aaff 0%, #009eb9 100%); 
    background-image: linear-gradient(to bottom, #00aaff 0%, #009eb9 100%); 
    background-repeat: repeat-x; 

}

但我不設法改變文字顏色。

我曾嘗試用下面的類：

toolbar-text-color toolbar-active-color

CODEPEN：

https://codepen.io/johnnyfittizio/pen/xRXJWd

問題：

是什麼風格的導航欄正確的方法是什麼？

方問題：

的最佳做法是設定樣式在app.scss吧？

來源

2016-11-29 johnnyfittizio

總結這些都是你需要爲了改變樣式導航欄的CSS元素：

toolbar-background - >的導航欄背景
toolbar-title - >的導航欄標題
bar-button - >爲菜單按鈕

要變更爲全球我已經在應用程序中應用了樣式。scss文件

如果您有更新，請編輯或作出新的答案。

來源

2016-11-29 13:22:41 johnnyfittizio

.toolbar-background is the default class provided in inspect element

試圖訪問這個類和應用的顏色

例如後

.toolbar-background-md{ 
    background: gray; 
    } 
.toolbar-background-ios{ 
    background: gray; 
    }

更新

更新的導航欄標題

.toolbar-title-md{ 
     color: white; 
     font-family: roboto; 
    } 
.toolbar-title-ios{ 
     color: white; 
     font-family: roboto; 
    }

來源

2016-11-29 11:21:56

謝謝回答。正如你所看到的，我已經設法設計背景顏色。我需要知道如何設置文字顏色的樣式。一般來說，可以很好地瞭解在Ionic 2中設置導航欄的正確方法。 – johnnyfittizio

請檢查更新後的答案 –

使用屬性「顏色」。如果你不改變顏色全aplicattion，沒有必要改變SCCS 例如：

<button ion-button color="danger" (click)="btn_logout()">Logout</button>

來源

2018-02-22 13:34:51

離子2 - 如何風格導航欄

回答

相關問題