I'm designing Ionic 4 plus angular app, I create 3 buttons with 3 different colour to each other (suppose all buttons is in the first page), in the second page I'm using HTML fieldset. Now I want when I click on the first button then second-page fieldset border colour should be blue,
when I click on second button fieldset border colour should be red etc.
Below image shows what exactly I want.
You can use add class and remove class.Create a function that will remove class which border color is black and add class which border color is red and e.t.
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.add("mystyle");//add class
}
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");//remove class
}
For better understanding read this: https://www.w3schools.com/howto/howto_js_add_class.asp
And this: https://www.w3schools.com/howto/howto_js_remove_class.asp
Good Luck :)
You can refer the following code sample in your code. It is not a complete working example but this has the basic idea about that.
page1.html
<button ion-button (click)="gotoPage2('blue')" color="blue">First button</button>
<button ion-button (click)="gotoPage2('red')" color="red">Second button</button>
<button ion-button (click)="gotoPage2('green')" color="green">Third button</button>
page1.ts
public gotoPage2(event ,color ){
this.navCtrl.push(page2,{
color:color
});
}
page2.ts
export class Page2 {
value:any;
constructor(public navParams: NavParams) {
this.color = navParams.get('color');
}
ionViewDidLoad() {
console.log('ionViewDidLoad EmiCalPage');
}
}
page2.html
<div [ngClass]="color" >
</div>
I am using the ionic starter menubar template. I would like to change the header background color of each page. I currently have:
<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 documentation does not help me. What is the correct way to do this?
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>
Codepen example
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';
});
Codepen example
Could not find a clean solution for this, but one hack might be to use the $stateChangeStart event and set the class name manually.
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');
}
}
});
});
fiddle
EDIT
The idea is same for sidebar template,
Updated fiddle
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 $stateChangeStart event,
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.
ionic color options
hope this helps.
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.
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 case because you want to change all views
$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
We got it working in CSS with:
.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!
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>
You can override $bar-stable-text color (taken from _variables.scss from ionic lib)
For example, in your scss change
$bar-stable-text: green !default;
If you want to change the ion-nav-bar this here works like a charm:
1 . Create a main controller to take care of your index page and all views within it.
2. Add this function to the controller:
$scope.setNavColor = function(color){
for(var i =0; i < document.getElementsByTagName("ion-header-bar").length; i++){
classNames = document.getElementsByTagName("ion-header-bar")[i].className;
classNames = classNames.replace(/(bar-light|bar-stable|bar-positive|bar-calm|bar-balanced|bar-energized|bar-assertive|bar-royal|bar-dark)/g, color );
document.getElementsByTagName("ion-header-bar")[i].className = classNames;
}
}
3 . add on-select to your ion-tab tab so it will call the function whenever your tab is chosen:
<ion-tab href="#addr" on-select="setNavColor('PUT_YOUR_COLOR_HERE')> </ion-tab>
4 . add on-deselect to you ion-tab too if you want the color to go back to some value when you leave.
5 . Have fun!
//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%;
}
put these lines in your style.css under /www/css/ directory of your ionic project
.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%;
}
If you're using scss within your app, you can create your own custom bar class and use ionic's bar mixins in it.
$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 class="bar-custom">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
We have this square <div> element which has a specific class applied for style. Inside there's a vertically/horizontally aligned <span> element which has sprite class applied to show an image.
The square has a black background and the image is a flat yellow icon. The idea is to switch the colors when the user is touching the whole square (including the background and the image). For this we need to switch 2 classes, on for the outer <div> (to show a yellow background) and another for the inner <span> to display a black image from the sprite.
The problem is, how to achieve this with AngularJS and touch down and up events. We are using angular-touch but that simply overrides ngClick for a better implementation for mobile/touch devices and adds ngSwipeLeft and ngSwipeRight directives. Neither doesn't seem to really help with our issue.
What would be the best way to achieve this effect with AngularJS?
I would use a scope boolean value to indicate when the div is touched, based on javascript events touchstart and touchend, then have ng-class show the correct class based on that boolean. Example:
<style>
.color-white {
color : white;
}
.background-green {
background : green;
}
</style>
<button my-touch="myIndicator"
ng-class="{
'color-white' : myIndicator,
'background-green' : myIndicator
}">Touch this</button>
.directive('myTouch',function() {
return {
link: function ($scope, $elem, $attrs) {
var _t = $attrs.myTouch;
$elem.on('touchstart touchend',function(e) {
$scope[_t] = (e.type === 'touchstart');
$scope.$apply();
});
}
}
});
I am developing a web app using twitter bootstrap, i want to create my own button with my own background, i don't want to use the already present buttons using btn-primary etc... but i want to create my own button with my own class. I want to use the core functionality of the btn class. so ideally my button will use the class=" btn btn-myPrimary".
I checked in variables.less and buttons.less, there only i am able to change the value of existing buttons such as btn-primary. i am not able create my own button something like btn-myPrimary.
Thanks in advance for any help.
If you can compile the less files then you can use this button mixin (from mixins.less):
// Button variants
// -------------------------
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(#color; #background; #border) {
color: #color;
background-color: #background;
border-color: #border;
...
If you look at buttons.less you can see how they use it:
.btn-default {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
.btn-primary {
.button-variant(#btn-primary-color; #btn-primary-bg; #btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.button-variant(#btn-warning-color; #btn-warning-bg; #btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.button-variant(#btn-danger-color; #btn-danger-bg; #btn-danger-border);
}
// Success appears as green
.btn-success {
.button-variant(#btn-success-color; #btn-success-bg; #btn-success-border);
}
// Info appears as blue-green
.btn-info {
.button-variant(#btn-info-color; #btn-info-bg; #btn-info-border);
}
Like this ref links below
Link
I have set custom icon to tabs, but it takes the blue color of tab panel, how can i get the original color of the icons.
var tabPanel = Ext.create('Ext.TabPanel',{
tabBarPosition: 'bottom',
items:[
{
title:'General',
iconCls:'icongen',
}
my css code
.icongen
{
-webkit-mask-box-image: url("resources/images/general.png");
}
.icongen
{
background-image: url("resources/images/general.png");
}
use this :) this will solve your problem
This is how I would do, add the following to your css:
.x-tab .x-button-icon.icongen, .x-button .x-button-icon.x-icon-mask.icongen {
-webkit-mask-image: url(<PATH TO IMAGE>);
}
along with iconCls you might also have to use iconMask: true