mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
55a0257dbc
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
133 lines
3.4 KiB
HTML
133 lines
3.4 KiB
HTML
<ion-header>
|
|
|
|
<ion-navbar>
|
|
<ion-title>{{demo}}</ion-title>
|
|
</ion-navbar>
|
|
|
|
</ion-header>
|
|
|
|
|
|
<ion-content>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-title>Long title that never ends. It just goes on and on my friend.</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-only>
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Default Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only color="danger">
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
<button ion-button icon-only color="secondary">
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-only color="dark">
|
|
<ion-icon name="more"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Colored Buttons</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only solid>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Solid</ion-title>
|
|
<ion-buttons end>
|
|
<button ion-button icon-right solid color="secondary">
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-buttons start>
|
|
<button ion-button icon-only outline>
|
|
<ion-icon name="contact"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-buttons end>
|
|
<button ion-button icon-right outline color="secondary">
|
|
Help
|
|
<ion-icon name="help-circle"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-title>Outline</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<button ion-button icon-only menuToggle>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
<ion-title>Left Menu</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top>
|
|
<ion-title>Right Menu</ion-title>
|
|
<button ion-button menuToggle right>
|
|
<ion-icon name="menu"></ion-icon>
|
|
</button>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
|
|
<ion-buttons end>
|
|
<button ion-button icon-only #button2 (click)="buttonClick(button2)">
|
|
<ion-icon name="search"></ion-icon>
|
|
</button>
|
|
</ion-buttons>
|
|
<ion-segment color="danger" [(ngModel)]="favorites">
|
|
<ion-segment-button value="featured">
|
|
Featured
|
|
</ion-segment-button>
|
|
<ion-segment-button value="recent">
|
|
Recent
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
|
|
<ion-segment [(ngModel)]="apps">
|
|
<ion-segment-button value="paid">
|
|
Paid
|
|
</ion-segment-button>
|
|
<ion-segment-button value="free">
|
|
Free
|
|
</ion-segment-button>
|
|
<ion-segment-button value="top">
|
|
Top
|
|
</ion-segment-button>
|
|
</ion-segment>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar no-border-top color="primary" *ngIf="demo != 'Title'">
|
|
<ion-searchbar></ion-searchbar>
|
|
</ion-toolbar>
|
|
|
|
</ion-content>
|