离子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 - 如何风格导航栏

回答

相关问题