Ionic-framework: Color attribute: add color as an attribute to our components

[brandyscarney]

This makes dynamically changing attributes easier for the user, and it will be easier to manage internally. For example:

<button primary>Button</button>

will become

<button color="primary">Button</button>

Edit: I realized button is probably a bad example since it already has this attribute, but this will benefit components like ion-navbar as well:

<ion-navbar color="secondary">
   ...
</ion-navbar>

or

<ion-navbar [color]="barColor">
   ...
</ion-navbar>

@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  barColor: string;

  constructor(private nav: NavController, platform: Platform) {
    this.barColor = platform.is('android') ? 'primary' : 'light';
  }
}

Edit: Components that will have the color input:

• [x] Badge
• [x] Button
• [x] Checkbox
• [x] Chip
• [x] Icon
• [x] Item (Item, Item Divider, List Header)
• [x] Label
• [x] Navbar
• [x] Radio
• [x] Searchbar
• [x] Segment
• [x] Spinner
• [x] Tabs
• [x] Toggle
• [x] Toolbar
• [x] Typography (headers, paragraphs, spans, etc.)

[szerner]

For 'dynamic theming' (at runtime) it would be nice to be able to write

[color]="themeColor"

or when theming is realized with normal classes:

[class]="themeClass"

[brandyscarney]

@szerner Yes that is how this attribute would work. :) Updated issue to show a better example.

[joekukish]

@brandyscarney what about variant instead of color. It expresses better the purpose.

[szerner]

I would appreciate the possibility to set the colors of the <ion-searchbar> component icons on the fly. Currently we can use some ionic Sass variables to define the colors for some of them (except the cancel-button icon, for this one I couldn't find any Sass variable) at build time, but we cannot set the colors at runtime (user defined theme).

But this might be non trivial, since the color seems to be "hard coded" into the icons SVG definition.
So I don't know, if it's possible at all to style their color via CSS. But I had to ask :-)

[brandyscarney]

Thanks for the recommendation @joekukish. We are going to stick with color as we believe this is more universally understood. 😄

Hi @szerner, could you open a separate issue for this and I can look into it? Right now I am adding the color input to the searchbar itself, but we may need to rethink and discuss how this works. Thanks!

[joekukish]

color does not transmit the semantic of it. Either way thank you for considering it.

[szerner]

@brandyscarney I opened a new issue #7826 for my suggestion.

[guillenotfound]

I think that might be useful to have ion-content here too, so we can customize it background :D

[albrecht-jun-zhang]

color="primary" does enable dynamically changing color of button, but how do I dynamically change "full" attribute e.g. <button full="true/false">

[brandyscarney]

@albrecht-jun-zhang You can use property binding for full as well:

<button ion-button [full]="isFull">Full</button>

See: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

[akkii922]

@brandyscarney One question please.
So this will change the theme across the application or just current page?
Because i need to change the theme of the application from one click.
Is there any solution for that?

[Iyashu5040]

@akkii922 A good solution to that would be to have an injectable class for the state of the theming variables. You then inject the state in the constructor of each controller and reference the state object properties on each page using things like [color].

[kristoff2016]

Hello,
How about alert is there any way that I could change button Color attribute ?

 let alert = this.alertCtrl.create({
      title: 'Almost There!',
      subTitle: 'Please pass your phone to your staff to receive stamp',
      buttons: [{
        text: 'Next',
        cssClass: 'next-button',
        handler:()=>{
          this.navCtrl.push(RedeemStampInputPage);
        }
      }]
    });
    alert.present();

[ionitron-bot[bot]]

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.