javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(colors): color should be added as an input instead of directly adding the color to the component

Browse Source 
BREAKING CHANGES:

Colors should be passed in the `color` input on components, not added
individually as an attribute on the component.

For example:

```
<ion-tabs primary>
```

Becomes

```
<ion-tabs color=”primary”>
```

Or to bind an expression to color:

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

```ts
@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';
  }
}
```

Reason for this change:
It was difficult to dynamically add colors to components, especially if
the name of the color attribute was unknown in the template.
This change keeps the css flat since we aren’t chaining color
attributes on components and instead we assign a class to the component
which includes the color’s name.
This allows you to easily toggle a component between multiple colors.
Speeds up performance because we are no longer reading through all of
the attributes to grab the color ones.

references #7467
closes #7087 closes #7401 closes #7523
This commit is contained in:
Brandy Carney
2016-08-23 17:16:55 -04:00
parent 7b60e9c601
commit 55a0257dbc
170 changed files with 1561 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/input/input.ts
View File

@ -37,12 +37,12 @@ import { Platform } from '../../platform/platform';
* ```html
* <ion-list>
* <ion-item>
* <ion-label primary>Inline Label</ion-label>
* <ion-label color="primary">Inline Label</ion-label>
* <ion-input placeholder="Text Input"></ion-input>
* </ion-item>
*
* <ion-item>
* <ion-label primary fixed>Fixed Label</ion-label>
* <ion-label color="primary" fixed>Fixed Label</ion-label>
* <ion-input type="tel" placeholder="Tel Input"></ion-input>
* </ion-item>
*
@ -51,17 +51,17 @@ import { Platform } from '../../platform/platform';
* </ion-item>
*
* <ion-item>
* <ion-label primary stacked>Stacked Label</ion-label>
* <ion-label color="primary" stacked>Stacked Label</ion-label>
* <ion-input type="email" placeholder="Email Input"></ion-input>
* </ion-item>
*
* <ion-item>
* <ion-label primary stacked>Stacked Label</ion-label>
* <ion-label color="primary" stacked>Stacked Label</ion-label>
* <ion-input type="password" placeholder="Password Input"></ion-input>
* </ion-item>
*
* <ion-item>
* <ion-label primary floating>Floating Label</ion-label>
* <ion-label color="primary" floating>Floating Label</ion-label>
* <ion-input></ion-input>
* </ion-item>
*
@ -159,7 +159,7 @@ export class TextInput extends InputBase {
* <ion-label floating>Description</ion-label>
* <ion-textarea></ion-textarea>
* </ion-item>
*
*
* <ion-item>
* <ion-label>Long Description</ion-label>
* <ion-textarea rows="6" placeholder="enter long description here..."></ion-textarea>