A p element inside an ion-item element is colored gray by default. This is fine but as it is the color cannot be overwritten using eg. <p primary>.
This, of course, is only an example. It applies to lots of other elements with color styles.
I'd like to be able to add the primary color to _any_ element without adding extra classes.
<ion-list>
<ion-item>
<p primary>Ion item p which should be colored as primary but is not</p>
<h3 primary>Ion Item h3 where coloring works as expected</h3>
</ion-item>
</ion-list>
Which Ionic Version? 2.x
http://plnkr.co/edit/I1sPuGmNwauHy40F4ITw?p=preview
Run ionic info from terminal/cmd prompt:
Your system information:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.3 Build version 7D175
Thanks for the issue! This will be fixed in the beta 12 release. The color will be added the following way:
<ion-list>
<ion-item>
<p color="primary">Ion item p which should be colored as primary but is not</p>
<h3 color="primary">Ion Item h3 where coloring works as expected</h3>
</ion-item>
</ion-list>
Please see https://github.com/driftyco/ionic/issues/7467 for more info! :)
With version ionic-angular 3.0.1 the following doesn麓t work anymore
<h3 color="danger">Step 1 / 4</h3>
Please check or tell me what has been changed?
When using color on text elements, always add ion-text like this:
<h3 ion-text color="danger">Step 1 / 4</h3>
This is also mentioned in the changelog for v3: link
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Most helpful comment
When using
coloron text elements, always addion-textlike this:This is also mentioned in the changelog for v3: link