Question

情况：

我需要为Ionic 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中设置样式吗？

Answer 1

总结一下，为了设置导航栏的样式，您需要更改这些css元素：

toolbar-title - ＆gt;对于导航栏背景
bar-button - ＆gt;对于导航栏标题
<?xml version="1.0" encoding="utf-8" ?> <configuration> <configSections> <section name="InterestRates_A" type="InterestRates_A_Configuration" /> </configSections> <InterestRates_A> <InterestRate_A band="0" validFrom="" validTo="2004-12-31" rate="0.00000"/> <InterestRate_A band="1" validFrom="2005-01-01" validTo="2005-12-31" rate="0.04247"/> <InterestRate_A band="2" validFrom="2006-01-01" validTo="2006-12-31" rate="0.02986"/> <InterestRate_A band="3" validFrom="2007-01-01" validTo="2009-10-30" rate="0.02740"/> <InterestRate_A band="4" validFrom="2009-10-31" validTo="" rate="0.02470"/> </InterestRates_A> </configuration> - ＆gt;用于菜单按钮

要使更改成为全局，我已将该样式应用于 app.scss 文件

如果您有更新，请编辑此内容或进行新的答案。

Answer 2

.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;
    }

Answer 3

使用属性“color”。如果你没有改变颜色的完整aplicattion，没有必要改变sccs 例如：

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

Ionic 2 - 如何设置导航栏的样式

3 个答案: