CODEWITHSUNDEEP
htmlcssionic-frameworkionic2
Softwarex3
Softwarex3

Reputation: 33

Color Attribute not working in Heading inside ionic content tag

The color attribute not working in ionic 2. the color works in normal IONIC tags but not in the HTMl tags. can you help with this. code has been written below. 

<ion-content>
<div class="page-home">
<h1 color="secondary">LOGO</h1>
<br/>
<br/>
<p color="danger">Sign in with social media account</p>
<div id="socialLogin">
  <img src="assets/icon/fb.svg" />
  <img src="assets/icon/tw.svg" />
  <img src="assets/icon/goo.svg" />
</div>
<ion-list>
  <ion-item>
    <ion-label floating color="secondary">Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>
<br/>
<br/>
<button ion-button full icon-left> <ion-icon name="log-in"></ion-icon>Login</button>

<button ion-button clear>Register</button>/
<button ion-button clear>Forgot Passowrd</button>
 </div>

</ion-content>

Upvotes: 2

Views: 2547

Answers (2)

Khurram
Khurram

Reputation: 695

Use ion-text directive on your element then apply color. It will work.

In your case it should be like this.

<h1 ion-text color="secondary">LOGO</h1>
<!-- and -->
<p ion-text color="danger">Sign in with social media account</p>

Upvotes: 13

naomi
naomi

Reputation: 2643

The color attributes on ionic components are @Inputs, So they could be used only for Ionic components. See the Ionic docs for example: https://ionicframework.com/docs/api/components/button/Button/#input-properties

For regular html use [style.color]="regular css color / name or hash".

If you want to use "secondary", you need to declare it in your component.ts file.

Upvotes: 0

Related Questions