ionic-framework - 当应用程序在 Ionic 3 的抽屉中时如何更改应用程序导航栏颜色
问题描述
当应用程序在抽屉中时,我需要更改应用程序导航栏的颜色。
我尝试了状态栏插件,但它仅在应用程序在屏幕上打开时更改状态栏的颜色。
this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#e13c31');
和
<preference name="StatusBarBackgroundColor" value="red" />
<preference name="StatusBarOverlaysWebView" value="true" />
我想将 Hrythm 应用程序导航栏颜色更改为红色,就像消息应用程序有自己的蓝色一样。
解决方案
1.****离子3
.toolbar-background {
background-color: blue;
}
2.****旧版本
<ion-navbar *navbar primary></ion-navbar>
<ion-navbar *navbar secondary></ion-navbar>
<ion-navbar *navbar danger></ion-navbar>
3.在variable.scss
我添加的属性为navbarColor: #009688
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B,
navbarColor: #009688
);
并在我的 home.html 中添加了 ion-navbar 元素。
<ion-navbar color='navbarColor'></ion-navbar>
4.使用 Ionic 2 rc2,我们可以使用以下变量来更改工具栏的外观:
$toolbar-background
$toolbar-border-color
$toolbar-text-color
$toolbar-active-color
$toolbar-inactive-color
5.
<ion-navbar no-border-bottom [color]="isAndroid ? 'primary' : 'light'">
6.
<ion-navbar color="primary">
<ion-title>Not Delivered Details</ion-title>
<ion-buttons end>
</ion-buttons>
</ion-navbar>
推荐阅读
- python - 使用列表推导,编写一个脚本,从一个列表到另一个列表中减去一个列表的元素
- python - 如何防止错误输入导致应用程序崩溃。Python、HTML 和 CSS
- c# - 断言该方法已使用 xUnit 调用
- python - 即使使用标头,get 请求也会返回 403 状态码
- javascript - 如何在 jQuery 表中添加下拉复选框?
- spring-test - 在 Spring Boot 中设置集成测试数据
- d - 为什么有些功能需要 GC?
- c++ - How can I forward declare an array inside a namespace in c++
- python-3.x - 在 Azure 的 Python 服务总线 SDK 中,如何查询命名空间的共享访问策略?
- android-studio - Android Studio 4.1 - 无法将调试器连接到进程