I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
Related
Angular Material is awesome for creating colour-themed sites. As well is the usual palettes, you can create dynamic themes without SCSS, using directives like...
md-colors="{background:'primary'}"
...to set the theme colour of any element. With a few lines of code like this, you can easily change the colour of your whole site, or set it dynamically from data:
.config(function($mdThemingProvider) {
var color = 'pink';
$mdThemingProvider.theme('dark')
.primaryPalette(color)
.dark()
;
My site has a few custom elements which require hover states, and the ideal thing would be to have these light up in the accent colour or primary colour. But is there a way to apply md-colors or similar to a hover state?
My conventional hover states look like this in CSS, of course :
.post a:hover{
background-color:#f00;
}
Here is a codepen set up for you to play with : https://codepen.io/anon/pen/PJRzOQ
In case anyone is desperate to use md-colors as a hover state, its not possible according to the docs. But I created a work-around by setting the background color with md-colors, and hiding it behind another element. The hover state then makes the top layer transparent, so it appears to be a dynamically set hover state!
You can see an example here:
https://codepen.io/anon/pen/oGqPeE
the html layout looks like this :
<ul ng-if="link" md-theme="myTheme">
<li ng-repeat="linkObj in link" md-colors="{background:'primary'}">
<a ng-href="{{linkObj.link_url}}" target="_blank" md-colors="{background:'accent'}"> <span ng-bind="linkObj.link_title" md-colors="{color:'accent'}"></span>
</a>
</li>
</ul>
I'm trying to do a toggleClass onClick in AngularJs 1.5. Is there any possibility to do that? For example, if you click on a div it'll change a background color.
You can use ng-class which is made for this very purpose.
ng-class is used like <div ng-class={'class_you_want_to_apply': some_boolean_variable}></div>
If you want to add more classes you can do so by added commas after each 'some_boolean_variable'
More docs at:
https://docs.angularjs.org/api/ng/directive/ngClass
I want to customize the md-chip color randomly without using css style. Is there any attribute in the md-chip directive?
<md-chips placeholder="Add more tags here"
secondary-placeholder="Enter tags here" ng-model="contact.contact.tags.attrVal" md-on-add="contact.createTag(contact.contact)" md-on-remove="contact.removeTag(contact.contact)"></md-chips>
you can use ng-style. i.e
ng-style={background-color:'red'}
See Issue 8692 on Angular Material's github. It appears to be a known issue that is being worked on currently.
I am using Onsen UI in my Cordova project, how is it possible to make custom modifier like chevron, tappable etc? In documentation it is nothing about this http://onsen.io/guide/overview.html#UsingModifier
I want to make theme switcher and load another css files when e.g. modifier="orange" or modifier="blue". Thx.
Defining custom modifiers is quite easy. A modifier will add a suffix to the base CSS class, i.e. for <ons-button> the base class is .button, so if you write
<ons-button modifier="orange">Orange button</ons-button>
the class .button--orange will be added. You can style the modified button by using the following CSS:
.button--orange {
background-color: #ffb836;
}
See how it's done in this simple example:
http://codepen.io/argelius/pen/bVwzJL
i would like to know how can we make a progress bar change its color as the percentage value increases.
I want the progress bar to show a red(danger) until 33%. Then turn blue upto 66% and then turn green until 100%. Can this be done using angular js?
Use ng-class.
ui.bootstrap has a good example of this for its rating control, using this technique:
ng-class="{'label-warning': percent<33, 'label-info': percent>=33 && percent<66, 'label-success': percent>=66}"
This works for progress bars as well. You just need to define percent somewhere.
http://plnkr.co/iBliMPYnWbsJJCtzqWTu
Update:
Here are classes intended for bootstrap progress bars:
ng-class="{'progress-bar-danger': percent<33, 'progress-bar-info': percent>=33 && percent<66, 'progress-bar-success': percent>=66}"
Well you can use angular-ui bootstrap's <progressbar> directive.
The colors that you suggest for the percentages exists in their collection of colors to be assigned as types in a specific state of the progress that you define. These state definitions such as the change in color from a specific value percentage can be manipulated in your controllers. Simply follow the angular-ui implementation with their <progressbar> directive.