CSS 在离子中更改离子视图标题颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30015413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change ion-view header color in ionic
提问by poiuytrez
I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:
我正在使用 ionic starter 菜单栏模板。我想更改每个页面的标题背景颜色。我目前有：
<ion-view view-title="Search">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
I tried:
我试过：
<ion-view view-title="Search" class="bar bar-header bar-assertive">
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
But it does not work at all (content is not rendered). The header documentationdoes not help me. What is the correct way to do this?
但它根本不起作用（不呈现内容）。该头文件并不能帮助我。这样做的正确方法是什么？
回答by brandyscarney
Some ways to do this:
一些方法来做到这一点：
You could add the ion-nav-bar to each view.
<ion-view view-title="Page 1"> <ion-nav-bar class="bar-balanced"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-content> ... </ion-content> </ion-view>You could also update the background-color (and any other properties) by using ng-style
Main navbar:
<ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar>CSS:
.nav-bar-block, .bar { background-color: inherit !important; }Controller:
$scope.$on('$ionicView.beforeEnter', function() { $rootScope.viewColor = 'green'; });
您可以将 ion-nav-bar 添加到每个视图中。
<ion-view view-title="Page 1"> <ion-nav-bar class="bar-balanced"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <ion-content> ... </ion-content> </ion-view>您还可以使用 ng-style 更新背景颜色（和任何其他属性）
主导航栏：
<ion-nav-bar class="bar-positive" ng-style="{'background-color': viewColor}"> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar>CSS：
.nav-bar-block, .bar { background-color: inherit !important; }控制器：
$scope.$on('$ionicView.beforeEnter', function() { $rootScope.viewColor = 'green'; });
回答by shakib
Could not find a clean solution for this, but one hack might be to use the $stateChangeStartevent and set the class name manually.
无法为此找到一个干净的解决方案，但一个黑客可能是使用该$stateChangeStart事件并手动设置类名。
angular.module('starter')
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-header-bar'));
switch(next.name) {
case 'tab.chats':
element.removeClass('bar-positive');
element.removeClass('bar-balanced');
element.addClass('bar-calm');
break;
case 'tab.dash':
element.removeClass('bar-calm');
element.removeClass('bar-balanced');
element.addClass('bar-positive');
break;
default :
element.removeClass('bar-calm');
element.removeClass('bar-positive');
element.addClass('bar-balanced');
}
}
});
});
EDITThe idea is same for sidebar template,
编辑侧边栏模板的想法相同，
Notice the line
注意行
<ion-nav-bar class="bar-positive">
in menu.html template, it denotes the base header color class.
but subsequent changes to pages i.e states header color needs to be changed manually in $stateChangeStartevent,
在 menu.html 模板中，它表示基本标题颜色类。但随后对页面的更改，即状态标题颜色需要在$stateChangeStart事件中手动更改，
code:
代码：
.run(function ($rootScope) {
var element;
$rootScope.$on('$stateChangeStart', function (event, next) {
if (next.name) {
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
console.log(element);
switch(next.name) {
case 'app.search':
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-dark');
element.addClass('bar-assertive');
break;
case 'app.browse':
element.removeClass('bar-calm');
element.removeClass('bar-assertive');
element.removeClass('bar-dark');
element.addClass('bar-energized');
break;
default :
element.removeClass('bar-positive');
element.removeClass('bar-energized');
element.removeClass('bar-assertive');
element.addClass('bar-dark');
}
}
});
});
- here the state name is checked to see which page is activating ex.
app.search - then according to requirement specific color class is assigned removing other color classes.
- 在这里检查状态名称以查看哪个页面正在激活 ex。
app.search - 然后根据要求分配特定的颜色类别，删除其他颜色类别。
hope this helps.
希望这可以帮助。
回答by Tenoch G
I modified the solution of @shakib to fit my needs, in my case the user sets the theme by clicking the app logo and thus the bar color should change. If this is your case you don't need to do the switch casebecause you want to change all views
我修改了@shakib 的解决方案以满足我的需求，在我的情况下，用户通过单击应用程序徽标来设置主题，因此条形颜色应该改变。如果这是您的情况，您不需要这样做，switch case因为您想更改所有视图
$rootScope.$on("$stateChangeStart", function (event, toState) {
var element;
if (toState.name){
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
if (debugMode) console.log(element);
// I get the bar-class from my localStorage where I keep the user settings
var saved_bar_class = $localStorage.get('bar-class','bar-calm');
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass(saved_bar_class);
// Here We could use a Switch Case on toState.name to put a different color to each state
}
});
Also when the user clicks the app logo I want to immediately change the bar color in order to give feedback to the user of what that button do. The above code won't do that because we haven't changed state yet, to fix this just add this code to your 'change theme' function
此外，当用户单击应用程序徽标时，我想立即更改条形颜色，以便向用户反馈该按钮的作用。上面的代码不会这样做，因为我们还没有改变状态，要解决这个问题，只需将此代码添加到您的“更改主题”功能中
$scope.changeAppTheme = function () {
var element;
element = angular.element(document.querySelectorAll('ion-side-menu-content ion-header-bar'));
// some code to select the theme
element.removeClass('bar-pink');
element.removeClass('bar-calm');
element.addClass('bar-pink');
// some other code
};
In this case I just have two colors, the ionic calm and a pink one that I defined Hope this helps someone
在这种情况下，我只有两种颜色，离子平静和我定义的粉红色希望这对某人有所帮助
回答by Jess Patton
if you are using different states and each state has a different controller than just have a $scope variable like $scope.stateone = "true"etc. Then on your ion-nav-bar use ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}". ng-class takes classes and an expression, whichever expression is true that is the class that is assigned. you can use ng-class with any boolean expression. this is how you can have a different color on each page.
如果您使用不同的状态并且每个状态都有一个不同的控制器，而不仅仅是有一个 $scope 变量$scope.stateone = "true"等等。然后在您的 ion-nav-bar 上使用ng-class="{'bar-positive': stateone, 'bar-stable': statetwo, 'bar-assertive': statethree}"。ng-class 接受类和一个表达式，无论哪个表达式为真，就是分配的类。您可以将 ng-class 与任何布尔表达式一起使用。这就是您可以在每个页面上使用不同颜色的方法。
回答by hooligan
We got it working in CSS with:
我们让它在 CSS 中工作：
.title.title-center.header-item {
background-color: black;
margin: 0px;
}
This means that we just refer to the Angular generated header classes directly with this CSS. Hope this helps!
这意味着我们只是直接用这个 CSS 引用 Angular 生成的头类。希望这可以帮助！
回答by hooligan
put these lines in your style.css under /www/css/directory of your ionic project
将这些行放在你/www/css/的 ionic 项目目录下的style.css 中
.title.title-center.header-item {
background-color:#4a87ee;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
回答by hooligan
//add these lines in your style.css file under /www/css/ yoyr project directory
.title.title-center.header-item {
background-color:#30393A;//#F38023!important; // for bg color
margin:0px!important;
margin-left:0px!important;
color: #ffffff!important;
text-align: center !important;
width: 100%;
}
回答by ?nder Ceylan
If you're using scss within your app, you can create your own custom bar class and use ionic's bar mixins in it.
如果您在应用程序中使用 scss，则可以创建自己的自定义栏类并在其中使用 ionic 的栏混合。
$bar-custom-bg: #ccc;
$bar-custom-border: #eee;
$bar-custom-text: #fff;
$bar-custom-active-border: darken($bar-custom-border, 10%);
$bar-custom-active-bg: darken($bar-custom-bg, 10%);
.bar {
&.bar-custom {
@include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-custom-border, $bar-custom-border 50%, transparent 50%);
}
.button {
@include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
}
After defining your class, you can use your new custom bar class with ion-nav-bar directive.
定义类后，您可以使用带有 ion-nav-bar 指令的新自定义栏类。
<ion-nav-bar class="bar-custom">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
回答by nium
You can override $bar-stable-text color(taken from _variables.scssfrom ionic lib)
您可以覆盖$bar-stable-text color（摘自_variables.scss从ionic lib）
For example, in your scss change
例如，在您的 scss 更改中
$bar-stable-text: green !default;
回答by LarsBauer
Try using the following code:
尝试使用以下代码：
<ion-view>
<ion-header-bar class="bar-assertive">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
<h1>Search</h1>
</ion-content>
</ion-view>
