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

【问题标题】：Ionic 2 - How to style the navbarIonic 2 - 如何设置导航栏的样式
【发布时间】：2016-11-29 10:50:54
【问题描述】：

情况：

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

【问题讨论】：

标签： css ionic-framework ionic2

【解决方案1】：

总结这些是您需要更改的 CSS 元素以设置导航栏的样式：

toolbar-background -> 用于导航栏背景
toolbar-title -> 导航栏标题
bar-button -> 用于菜单按钮

为了使更改具有全局性，我在 app.scss 文件中应用了样式

如果您有更新，请编辑此内容或做出新的回答。

【讨论】：

【解决方案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;
    }

【讨论】：

感谢您的回答。如您所见，我已经设法设置了背景颜色的样式。我还需要知道如何设置文本颜色的样式。总的来说，知道在 Ionic 2 中设置导航栏样式的正确方法会很高兴。

【解决方案3】：

使用属性“颜色”。如果您不更改完整应用程序的颜色，则无需更改 sccs 例如：

 &lt;button ion-button color="danger" (click)="btn_logout()"&gt;Logout&lt;/button&gt;

【讨论】：