javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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

8
demos/alert/main.html
View File

@@ -10,9 +10,9 @@
<ion-content padding>
<button ion-button block (click)="doAlert()">Basic Alert</button>
<button ion-button light block (click)="doConfirm()">Confirm Alert</button>
<button ion-button secondary block (click)="doPrompt()">Prompt Alert</button>
<button ion-button danger block (click)="doRadio()">Radio Alert</button>
<button ion-button dark block (click)="doCheckbox()">Checkbox Alert</button>
<button ion-button color="light" block (click)="doConfirm()">Confirm Alert</button>
<button ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</button>
<button ion-button color="danger" block (click)="doRadio()">Radio Alert</button>
<button ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</button>
</ion-content>

28
demos/button/main.html
View File

@@ -13,13 +13,13 @@
<button ion-button>Default</button>
<button ion-button secondary>Secondary</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button danger>Danger</button>
<button ion-button color="danger">Danger</button>
<button ion-button light>Light</button>
<button ion-button color="light">Light</button>
<button ion-button dark>Dark</button>
<button ion-button color="dark">Dark</button>
<h4>Shapes</h4>
@@ -33,36 +33,36 @@
<h4>Outlines</h4>
<button ion-button secondary full outline>Outline + Full</button>
<button ion-button color="secondary" full outline>Outline + Full</button>
<button ion-button secondary block outline>Outline + Block</button>
<button ion-button color="secondary" block outline>Outline + Block</button>
<button ion-button secondary round outline>Outline + Round</button>
<button ion-button color="secondary" round outline>Outline + Round</button>
<button ion-button secondary fab outline style="position: relative;">FAB</button>
<button ion-button color="secondary" fab outline style="position: relative;">FAB</button>
<h4>Icons</h4>
<button ion-button icon-left dark>
<button ion-button icon-left color="dark">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
<button ion-button icon-right dark>
<button ion-button icon-right color="dark">
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<button ion-button icon-only dark>
<button ion-button icon-only color="dark">
<ion-icon name="star"></ion-icon>
</button>
<h4>Sizes</h4>
<button ion-button light large>Large</button>
<button ion-button color="light" large>Large</button>
<button ion-button light>Default</button>
<button ion-button color="light">Default</button>
<button ion-button light small>Small</button>
<button ion-button color="light" small>Small</button>
</ion-content>

14
demos/checkbox/main.html
View File

@@ -17,7 +17,7 @@
</ion-item>
<ion-item>
<ion-checkbox dark [(ngModel)]="data.daenerys"></ion-checkbox>
<ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
<ion-label>Daenerys Targaryen</ion-label>
</ion-item>
@@ -27,12 +27,12 @@
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.tyroin" secondary></ion-checkbox>
<ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
<ion-label>Tyrion Lannister</ion-label>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.sansa" danger></ion-checkbox>
<ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
<ion-label>Sansa Stark</ion-label>
</ion-item>
@@ -42,7 +42,7 @@
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.cersei" dark></ion-checkbox>
<ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
<ion-label>Cersei Lannister</ion-label>
</ion-item>
@@ -57,17 +57,17 @@
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.hodor" dark></ion-checkbox>
<ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
<ion-label>Hodor</ion-label>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.catelyn" secondary></ion-checkbox>
<ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
<ion-label>Catelyn Stark</ion-label>
</ion-item>
<ion-item>
<ion-checkbox [(ngModel)]="data.bronn" royal></ion-checkbox>
<ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
<ion-label>Bronn</ion-label>
</ion-item>

2
demos/config/main.html
View File

@@ -57,7 +57,7 @@ ionicBootstrap(MyApp, [], {
});</pre>
<div padding>
<button ion-button block secondary (click)="push()">
<button ion-button block color="secondary" (click)="push()">
Go to Another Page
</button>
</div>

6
demos/events/app.html
View File

@@ -1,7 +1,7 @@
<ion-menu #menu [content]="content">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
@@ -13,7 +13,7 @@
Logged in as <b>Administrator</b>
</ion-list-header>
<button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
<ion-label primary>{{p.title}}</ion-label>
<ion-label color="primary">{{p.title}}</ion-label>
</button>
<button ion-item menuToggle>
@@ -27,7 +27,7 @@
Please Log In
</ion-list-header>
<button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
<ion-label primary>{{p.title}}</ion-label>
<ion-label color="primary">{{p.title}}</ion-label>
</button>
<button ion-item menuToggle>

6
demos/events/login.html
View File

@@ -20,18 +20,18 @@
<ion-list no-margin>
<ion-item>
<ion-label stacked primary>Name</ion-label>
<ion-label stacked color="primary">Name</ion-label>
<ion-input [(ngModel)]="user.name" disabled></ion-input>
</ion-item>
<ion-item>
<ion-label stacked primary>Username</ion-label>
<ion-label stacked color="primary">Username</ion-label>
<ion-input [(ngModel)]="user.username" disabled></ion-input>
</ion-item>
</ion-list>
<div padding>
<button ion-button block (click)="login()">Login</button>
<button ion-button block secondary menuToggle>Toggle Menu</button>
<button ion-button block color="secondary" menuToggle>Toggle Menu</button>
</div>
</ion-content>

2
demos/events/logout.html
View File

@@ -18,6 +18,6 @@
<div padding>
<button ion-button block (click)="logout()">Logout</button>
<button ion-button block secondary menuToggle>Toggle Menu</button>
<button ion-button block color="secondary" menuToggle>Toggle Menu</button>
</div>
</ion-content>

28
demos/icon/main.html
View File

@@ -10,50 +10,50 @@
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" bright></ion-icon></ion-col>
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" danger></ion-icon></ion-col>
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
<ion-col><ion-icon name="star" bright></ion-icon></ion-col>
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
</ion-row>
</ion-content>

10
demos/input/main.html
View File

@@ -11,12 +11,12 @@
<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>
@@ -25,17 +25,17 @@
</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>

14
demos/item-sliding/main.html
View File

@@ -27,22 +27,22 @@
</ion-item>
<ion-item-options>
<button ion-button secondary (click)="more(item)">
<button ion-button color="secondary" (click)="more(item)">
<ion-icon name="menu"></ion-icon>
More
</button>
<button ion-button dark (click)="mute(item)">
<button ion-button color="dark" (click)="mute(item)">
<ion-icon name="volume-off"></ion-icon>
Mute
</button>
<button ion-button danger (click)="delete(item)">
<button ion-button color="danger" (click)="delete(item)">
<ion-icon name="trash"></ion-icon>
Delete
</button>
</ion-item-options>
<ion-item-options side="left" (ionSwipe)="archive(item)">
<button ion-button primary expandable (click)="archive(item)">
<button ion-button color="primary" expandable (click)="archive(item)">
<ion-icon name="archive" class="expand-hide"></ion-icon>
<div class="expand-hide">Archive</div>
<ion-spinner id="archive-spinner"></ion-spinner>
@@ -63,16 +63,16 @@
<p>{{login.username}}</p>
</ion-item>
<ion-item-options side="left">
<button ion-button danger>
<button ion-button color="danger">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
<ion-item-options (ionSwipe)="download(item)" icon-left>
<button ion-button dark (click)="more(item)">
<button ion-button color="dark" (click)="more(item)">
<ion-icon name="volume-off"></ion-icon>
Mute
</button>
<button ion-button light expandable (click)="download(item)">
<button ion-button color="light" expandable (click)="download(item)">
<ion-icon name="download" class="expand-hide"></ion-icon>
<div class="expand-hide">Download</div>
<ion-spinner id="download-spinner"></ion-spinner>

28
demos/item/main.html
View File

@@ -19,36 +19,36 @@
<ion-item-group>
<ion-item>
<ion-icon name="plane" item-left danger></ion-icon>
<ion-icon name="plane" item-left color="danger"></ion-icon>
<ion-label>Airplane Mode</ion-label>
<ion-toggle secondary></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
</ion-item>
<button ion-item>
<ion-icon name="wifi" item-left primary></ion-icon>
<ion-icon name="wifi" item-left color="primary"></ion-icon>
<ion-label>Wi-Fi</ion-label>
<ion-note item-right>The Interwebz</ion-note>
</button>
<button ion-item>
<ion-icon name="bluetooth" item-left primary></ion-icon>
<ion-icon name="bluetooth" item-left color="primary"></ion-icon>
<ion-label>Bluetooth</ion-label>
<ion-note item-right>Off</ion-note>
</button>
</ion-item-group>
<ion-item-divider primary>
<ion-item-divider color="primary">
Other Settings
<button ion-button item-right outline light>Clear</button>
<button ion-button item-right outline color="light">Clear</button>
</ion-item-divider>
<button ion-item>
<ion-icon name="call" item-left secondary></ion-icon>
<ion-icon name="call" item-left color="secondary"></ion-icon>
<ion-label>Cellular</ion-label>
</button>
<button ion-item>
<ion-icon name="link" item-left secondary></ion-icon>
<ion-icon name="link" item-left color="secondary"></ion-icon>
<ion-label>Personal Hotspot</ion-label>
<ion-note item-right>Off</ion-note>
</button>
@@ -61,11 +61,11 @@
</ion-list-header>
<ion-item>
<ion-label dark>Always</ion-label>
<ion-label color="dark">Always</ion-label>
<ion-radio value="always" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label dark>Only while phone is locked</ion-label>
<ion-label color="dark">Only while phone is locked</ion-label>
<ion-radio value="locked"></ion-radio>
</ion-item>
</ion-list>
@@ -76,22 +76,22 @@
</ion-list-header>
<ion-item>
<ion-icon name="ionic" item-left primary></ion-icon>
<ion-icon name="ionic" item-left color="primary"></ion-icon>
<ion-label>Ionic View</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="brush" item-left primary></ion-icon>
<ion-icon name="brush" item-left color="primary"></ion-icon>
<ion-label>Ionic Creator</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="logo-octocat" item-left dark></ion-icon>
<ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
<ion-label>Hubstruck</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="paw" item-left danger></ion-icon>
<ion-icon name="paw" item-left color="danger"></ion-icon>
<ion-label>Barkpark</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>

20
demos/label/main.html
View File

@@ -19,24 +19,24 @@
<!-- TODO the styling of the icons can be removed when #5319 is done -->
<ion-item>
<ion-label stacked primary>Mobile</ion-label>
<ion-label stacked color="primary">Mobile</ion-label>
<ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
<ion-icon primary item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
<ion-icon primary item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
<ion-icon color="primary" item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
<ion-icon color="primary" item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
</ion-item>
<ion-item>
<ion-label stacked primary>Email</ion-label>
<ion-label stacked color="primary">Email</ion-label>
<ion-input type="email" value="hi@ionic.io"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked primary>Birthday</ion-label>
<ion-label stacked color="primary">Birthday</ion-label>
<ion-input type="text" value="November 21, 2013"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked primary>Address</ion-label>
<ion-label stacked color="primary">Address</ion-label>
<ion-textarea
value="121 S Pinckney St
Madison WI 53703
@@ -45,18 +45,18 @@ United States">
</ion-item>
<ion-item>
<ion-label stacked dark>Notes</ion-label>
<ion-label stacked color="dark">Notes</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<button ion-item detail-none>
<ion-label primary>Send Message</ion-label>
<ion-label color="primary">Send Message</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Share Contact</ion-label>
<ion-label color="primary">Share Contact</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Add to Favorites</ion-label>
<ion-label color="primary">Add to Favorites</ion-label>
</button>
</ion-list>

24
demos/list/main.html
View File

@@ -15,30 +15,30 @@
</ion-list-header>
<ion-item>
<ion-icon name="plane" item-left danger></ion-icon>
<ion-icon name="plane" item-left color="danger"></ion-icon>
<ion-label>Airplane Mode</ion-label>
<ion-toggle secondary></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
</ion-item>
<button ion-item>
<ion-icon name="wifi" item-left primary></ion-icon>
<ion-icon name="wifi" item-left color="primary"></ion-icon>
<ion-label>Wi-Fi</ion-label>
<ion-note item-right>The Interwebz</ion-note>
</button>
<button ion-item>
<ion-icon name="bluetooth" item-left primary></ion-icon>
<ion-icon name="bluetooth" item-left color="primary"></ion-icon>
<ion-label>Bluetooth</ion-label>
<ion-note item-right>Off</ion-note>
</button>
<button ion-item>
<ion-icon name="call" item-left secondary></ion-icon>
<ion-icon name="call" item-left color="secondary"></ion-icon>
<ion-label>Cellular</ion-label>
</button>
<button ion-item>
<ion-icon name="link" item-left secondary></ion-icon>
<ion-icon name="link" item-left color="secondary"></ion-icon>
<ion-label>Personal Hotspot</ion-label>
<ion-note item-right>Off</ion-note>
</button>
@@ -50,11 +50,11 @@
</ion-list-header>
<ion-item>
<ion-label dark>Always</ion-label>
<ion-label color="dark">Always</ion-label>
<ion-radio value="always" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label dark>Only while phone is locked</ion-label>
<ion-label color="dark">Only while phone is locked</ion-label>
<ion-radio value="locked"></ion-radio>
</ion-item>
</ion-list>
@@ -65,22 +65,22 @@
</ion-list-header>
<ion-item>
<ion-icon name="ionic" item-left primary></ion-icon>
<ion-icon name="ionic" item-left color="primary"></ion-icon>
<ion-label>Ionic View</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="brush" item-left primary></ion-icon>
<ion-icon name="brush" item-left color="primary"></ion-icon>
<ion-label>Ionic Creator</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="logo-octocat" item-left dark></ion-icon>
<ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
<ion-label>Hubstruck</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="paw" item-left danger></ion-icon>
<ion-icon name="paw" item-left color="danger"></ion-icon>
<ion-label>Barkpark</ion-label>
<button ion-button outline item-right>Uninstall</button>
</ion-item>

4
demos/local-storage/main.html
View File

@@ -33,7 +33,7 @@
</ion-list>
<div padding>
<button ion-button icon-left block secondary (click)="set()">
<button ion-button icon-left block color="secondary" (click)="set()">
<ion-icon name="add"></ion-icon>
Add
</button>
@@ -54,7 +54,7 @@
</ion-list>
<div padding>
<button ion-button icon-left block danger (click)="remove()">
<button ion-button icon-left block color="danger" (click)="remove()">
<ion-icon name="remove"></ion-icon>
Delete
</button>

4
demos/menu/app.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" id="menu1">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
@@ -20,7 +20,7 @@
<ion-menu [content]="content" id="menu2">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>

6
demos/menu/main.html
View File

@@ -14,13 +14,13 @@
<ion-content padding>
<h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
<h4>Active Menu: <b color="primary">{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
<p>This page has two menus with different id's, but only one is active at a time.</p>
<button ion-button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
<button ion-button block color="secondary" (click)="menu1Active()">Make Menu 1 Active</button>
<button ion-button block danger (click)="menu2Active()">Make Menu 2 Active</button>
<button ion-button block color="danger" (click)="menu2Active()">Make Menu 2 Active</button>
<button ion-button block [menuToggle]="activeMenu">Toggle Menu</button>

2
demos/modal/main.html
View File

@@ -31,7 +31,7 @@
</ion-list>
<div padding>
<button ion-button block danger (click)="openModalWithParams()">Open with Parameters</button>
<button ion-button block color="danger" (click)="openModalWithParams()">Open with Parameters</button>
</div>
</ion-content>

2
demos/modal/modal-content.html
View File

@@ -22,6 +22,6 @@
<div [hidden]="myParam">
<p>No parameters passed.</p>
</div>
<button ion-button danger full (click)="dismiss()">Close Modal</button>
<button ion-button color="danger" full (click)="dismiss()">Close Modal</button>
</ion-content>

2
demos/nav-params/main.html
View File

@@ -25,7 +25,7 @@
</ion-list>
<div padding>
<button ion-button secondary block (click)="pushParams()">Navigate with Parameters</button>
<button ion-button color="secondary" block (click)="pushParams()">Navigate with Parameters</button>
</div>
</ion-content>

2
demos/navigation/page.html
View File

@@ -10,6 +10,6 @@
<ion-content padding>
<button ion-button block (click)="push()">Push Another Page</button>
<button ion-button secondary block (click)="pop()">Pop This Page</button>
<button ion-button color="secondary" block (click)="pop()">Pop This Page</button>
</ion-content>

2
demos/popover/main.html
View File

@@ -1,6 +1,6 @@
<ion-header>
<ion-navbar primary>
<ion-navbar color="primary">
<ion-title>Popover</ion-title>
<ion-buttons end>
<button ion-button (click)="presentRadioPopover($event)">

18
demos/range/main.html
View File

@@ -25,10 +25,10 @@
<ion-list>
<ion-list-header>
Saturation
<ion-badge item-right secondary>{{saturation}}</ion-badge>
<ion-badge item-right color="secondary">{{saturation}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" secondary>
<ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" color="secondary">
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
@@ -38,12 +38,12 @@
<ion-list>
<ion-list-header>
Warmth
<ion-badge item-right danger>{{warmth}}</ion-badge>
<ion-badge item-right color="danger">{{warmth}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" danger>
<ion-icon range-left small danger name="thermometer"></ion-icon>
<ion-icon range-right danger name="thermometer"></ion-icon>
<ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" color="danger">
<ion-icon range-left small color="danger" name="thermometer"></ion-icon>
<ion-icon range-right color="danger" name="thermometer"></ion-icon>
</ion-range>
</ion-item>
</ion-list>
@@ -51,11 +51,11 @@
<ion-list>
<ion-list-header>
Structure
<ion-badge item-right dark>{{structure.lower}}</ion-badge>
<ion-badge item-right dark>{{structure.upper}}</ion-badge>
<ion-badge item-right color="dark">{{structure.lower}}</ion-badge>
<ion-badge item-right color="dark">{{structure.upper}}</ion-badge>
</ion-list-header>
<ion-item>
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" dark>
<ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" color="dark">
<ion-label range-left>-0</ion-label>
<ion-label range-right>100</ion-label>
</ion-range>

4
demos/searchbar/main.html
View File

@@ -12,7 +12,7 @@
<ion-content>
<ion-searchbar placeholder="Filter Items with Cancel" showCancelButton danger (ionInput)="filterItems($event)"></ion-searchbar>
<ion-searchbar placeholder="Filter Items with Cancel" showCancelButton color="danger" (ionInput)="filterItems($event)"></ion-searchbar>
<p padding-left padding-right>Searchbars can be placed in a toolbar or anywhere in the content.</p>
@@ -27,7 +27,7 @@
<ion-footer>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-searchbar placeholder="Search" (ionInput)="filterItems($event)"></ion-searchbar>
</ion-toolbar>

8
demos/segment/main.html
View File

@@ -34,7 +34,7 @@
{{ safari }}
</ion-card-header>
<ion-card-content>
<ion-segment [(ngModel)]="safari" dark>
<ion-segment [(ngModel)]="safari" color="dark">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>
</ion-segment-button>
@@ -47,7 +47,7 @@
</ion-segment>
<ion-list style="margin: 0" inset>
<button ion-item *ngFor="let sItem of getSafariItems(safari)">
<ion-icon item-left [name]="sItem.icon" primary></ion-icon>
<ion-icon item-left [name]="sItem.icon" color="primary"></ion-icon>
{{ sItem.name }}
</button>
</ion-list>
@@ -59,11 +59,11 @@
<ion-toolbar no-border-bottom>
<ion-title>
Weather: {{ weather == 'sunny' ? '96' : '77' }}°
<ion-icon [name]="weather" danger></ion-icon>
<ion-icon [name]="weather" color="danger"></ion-icon>
</ion-title>
</ion-toolbar>
<ion-toolbar no-border-top no-border-bottom>
<ion-segment [(ngModel)]="weather" danger>
<ion-segment [(ngModel)]="weather" color="danger">
<ion-segment-button value="sunny">
Sunny
</ion-segment-button>

12
demos/tabs/main.html
View File

@@ -17,7 +17,7 @@
<!-- Icons -->
<ion-tabs selectedIndex="1" primary>
<ion-tabs selectedIndex="1" color="primary">
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
@@ -25,7 +25,7 @@
<!-- Icons on top of text -->
<ion-tabs selectedIndex="2" secondary>
<ion-tabs selectedIndex="2" color="secondary">
<ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star" [root]="root" tabBadge="12" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
@@ -33,7 +33,7 @@
<!-- Icons below text -->
<ion-tabs tabsLayout="icon-bottom" selectedIndex="1" danger>
<ion-tabs tabsLayout="icon-bottom" selectedIndex="1" color="danger">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -41,7 +41,7 @@
<!-- Icons right of text -->
<ion-tabs tabsLayout="icon-right" selectedIndex="0" light>
<ion-tabs tabsLayout="icon-right" selectedIndex="0" color="light">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@
<!-- Icons left of text -->
<ion-tabs tabsLayout="icon-left" dark>
<ion-tabs tabsLayout="icon-left" color="dark">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -65,7 +65,7 @@
<!-- No overflow text -->
<ion-tabs primary>
<ion-tabs color="primary">
<ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>

8
demos/textarea/main.html
View File

@@ -12,12 +12,12 @@
<ion-list>
<ion-item>
<ion-label primary>Inline Label</ion-label>
<ion-label color="primary">Inline Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label primary fixed>Fixed Label</ion-label>
<ion-label color="primary" fixed>Fixed Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
@@ -26,12 +26,12 @@
</ion-item>
<ion-item>
<ion-label primary stacked>Stacked Label</ion-label>
<ion-label color="primary" stacked>Stacked Label</ion-label>
<ion-textarea placeholder="Textarea"></ion-textarea>
</ion-item>
<ion-item>
<ion-label primary floating>Floating Label</ion-label>
<ion-label color="primary" floating>Floating Label</ion-label>
<ion-textarea></ion-textarea>
</ion-item>

12
demos/toggle/main.html
View File

@@ -23,7 +23,7 @@
<ion-item>
<ion-label>Éowyn</ion-label>
<ion-toggle [(ngModel)]="data.eowyn" danger></ion-toggle>
<ion-toggle [(ngModel)]="data.eowyn" color="danger"></ion-toggle>
</ion-item>
<ion-item>
@@ -33,17 +33,17 @@
<ion-item>
<ion-label>Gimli</ion-label>
<ion-toggle [(ngModel)]="data.gimli" danger></ion-toggle>
<ion-toggle [(ngModel)]="data.gimli" color="danger"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Saruman</ion-label>
<ion-toggle [(ngModel)]="data.saruman" dark></ion-toggle>
<ion-toggle [(ngModel)]="data.saruman" color="dark"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Gandalf</ion-label>
<ion-toggle [(ngModel)]="data.gandalf" secondary></ion-toggle>
<ion-toggle [(ngModel)]="data.gandalf" color="secondary"></ion-toggle>
</ion-item>
<ion-item>
@@ -58,12 +58,12 @@
<ion-item>
<ion-label>Gollum</ion-label>
<ion-toggle [(ngModel)]="data.gollum" dark></ion-toggle>
<ion-toggle [(ngModel)]="data.gollum" color="dark"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Galadriel</ion-label>
<ion-toggle [(ngModel)]="data.galadriel" secondary></ion-toggle>
<ion-toggle [(ngModel)]="data.galadriel" color="secondary"></ion-toggle>
</ion-item>
</ion-list>

14
demos/toolbar/main.html
View File

@@ -32,15 +32,15 @@
<ion-toolbar no-border-top>
<ion-buttons start>
<button ion-button icon-only danger>
<button ion-button icon-only color="danger">
<ion-icon name="contact"></ion-icon>
</button>
<button ion-button icon-only secondary>
<button ion-button icon-only color="secondary">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-only dark>
<button ion-button icon-only color="dark">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
@@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid secondary>
<button ion-button icon-right solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline secondary>
<button ion-button icon-right outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@@ -97,7 +97,7 @@
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment danger [(ngModel)]="favorites">
<ion-segment color="danger" [(ngModel)]="favorites">
<ion-segment-button value="featured">
Featured
</ion-segment-button>
@@ -125,7 +125,7 @@
<ion-searchbar></ion-searchbar>
</ion-toolbar>
<ion-toolbar no-border-top primary *ngIf="demo != 'Title'">
<ion-toolbar no-border-top color="primary" *ngIf="demo != 'Title'">
<ion-searchbar></ion-searchbar>
</ion-toolbar>

2
src/components.core.scss
View File

@@ -7,7 +7,6 @@
@import
"components/app/normalize",
"components/app/structure",
"components/app/typography",
"util/util";
@@ -27,6 +26,7 @@
"components/show-hide-when/show-hide-when",
"components/slides/slides",
"components/spinner/spinner",
"components/typography/typography",
"components/virtual-scroll/virtual-scroll";

5
src/components.ios.scss
View File

@@ -15,6 +15,7 @@
"components/chip/chip.ios",
"components/content/content.ios",
"components/datetime/datetime.ios",
"components/icon/icon.ios",
"components/input/input.ios",
"components/item/item.ios",
"components/label/label.ios",
@@ -29,10 +30,12 @@
"components/searchbar/searchbar.ios",
"components/segment/segment.ios",
"components/select/select.ios",
"components/spinner/spinner.ios",
"components/tabs/tabs.ios",
"components/toggle/toggle.ios",
"components/toast/toast.ios",
"components/toolbar/toolbar.ios";
"components/toolbar/toolbar.ios",
"components/typography/typography.ios";
// iOS Platform

5
src/components.md.scss
View File

@@ -15,6 +15,7 @@
"components/chip/chip.md",
"components/content/content.md",
"components/datetime/datetime.md",
"components/icon/icon.md",
"components/input/input.md",
"components/item/item.md",
"components/label/label.md",
@@ -29,10 +30,12 @@
"components/searchbar/searchbar.md",
"components/segment/segment.md",
"components/select/select.md",
"components/spinner/spinner.md",
"components/tabs/tabs.md",
"components/toggle/toggle.md",
"components/toast/toast.md",
"components/toolbar/toolbar.md";
"components/toolbar/toolbar.md",
"components/typography/typography.md";
// Material Design w/ iOS Platform

1
src/components.ts
View File

@@ -60,4 +60,5 @@ export { Toast, ToastController } from './components/toast/toast';
export { ToastOptions } from './components/toast/toast-options';
export { Toggle } from './components/toggle/toggle';
export { Toolbar, ToolbarBase, Header, Footer } from './components/toolbar/toolbar';
export { Typography } from './components/typography/typography';
export { VirtualScroll } from './components/virtual-scroll/virtual-scroll';

5
src/components.wp.scss
View File

@@ -15,6 +15,7 @@
"components/chip/chip.wp",
"components/content/content.wp",
"components/datetime/datetime.wp",
"components/icon/icon.wp",
"components/input/input.wp",
"components/item/item.wp",
"components/label/label.wp",
@@ -29,10 +30,12 @@
"components/searchbar/searchbar.wp",
"components/segment/segment.wp",
"components/select/select.wp",
"components/spinner/spinner.wp",
"components/tabs/tabs.wp",
"components/toggle/toggle.wp",
"components/toast/toast.wp",
"components/toolbar/toolbar.wp";
"components/toolbar/toolbar.wp",
"components/typography/typography.wp";
// Windows w/ iOS Platform

2
src/components/alert/test/dismiss/index.ts
View File

@@ -58,7 +58,7 @@ export class E2EPage {
</ion-item>
</ion-list>
<div padding style="padding-top: 0 !important;">
<button ion-button list-item primary block>
<button ion-button list-item color="primary" block>
Submit
</button>
</div>

33
src/components/app/app.ios.scss
View File

@@ -7,15 +7,6 @@ ion-content {
color: $text-ios-color;
}
p {
color: $paragraph-ios-color;
}
a {
color: $link-ios-color;
}
hr {
background-color: rgba(0, 0, 0, .12);
}
@@ -23,27 +14,3 @@ hr {
&.hairlines hr {
height: $hairlines-width;
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a:not([button]),
small,
b,
i,
strong,
em,
sub,
sup,
ion-icon {
&[#{$color-name}] {
color: $color-base;
}
}
}

32
src/components/app/app.md.scss
View File

@@ -7,38 +7,6 @@ ion-content {
color: $text-md-color;
}
p {
color: $paragraph-md-color;
}
a {
color: $link-md-color;
}
hr {
background-color: rgba(0, 0, 0, .08);
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a:not([button]),
small,
b,
i,
strong,
em,
sub,
sup,
ion-icon {
&[#{$color-name}] {
color: $color-base;
}
}
}

32
src/components/app/app.wp.scss
View File

@@ -7,38 +7,6 @@ ion-content {
color: $text-wp-color;
}
p {
color: $paragraph-wp-color;
}
a {
color: $link-wp-color;
}
hr {
background-color: rgba(0, 0, 0, .08);
}
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a:not([button]),
small,
b,
i,
strong,
em,
sub,
sup,
ion-icon {
&[#{$color-name}] {
color: $color-base;
}
}
}

2
src/components/app/test/cordova/app.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" side="left">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>

6
src/components/app/test/cordova/page1.html
View File

@@ -1,7 +1,7 @@
<ion-header>
<ion-navbar primary>
<ion-segment [(ngModel)]="sort" light>
<ion-navbar color="primary">
<ion-segment [(ngModel)]="sort" color="light">
<ion-segment-button value="all">All</ion-segment-button>
<ion-segment-button value="favorites">Favorites</ion-segment-button>
</ion-segment>
@@ -30,7 +30,7 @@
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
<button ion-button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
<button ion-button block secondary (click)="goToTabs()">Go to Tabs</button>
<button ion-button block color="secondary" (click)="goToTabs()">Go to Tabs</button>
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>

2
src/components/app/test/cordova/page2.html
View File

@@ -28,6 +28,6 @@
<button ion-button block [navPush]="page1">Go to Page 1</button>
<button ion-button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button>
<button ion-button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
<button ion-button block color="secondary" (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
</ion-content>

6
src/components/app/test/gesture-collision/main.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" side="left" persistent="true">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
@@ -74,7 +74,7 @@
</ion-content>
<ion-footer>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
@@ -85,7 +85,7 @@
<ion-menu [content]="content" side="right">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>

2
src/components/app/test/gesture-collision/page1.html
View File

@@ -10,7 +10,7 @@
Menu
</ion-title>
<button ion-button menuToggle="right" right secondary>
<button ion-button menuToggle="right" right color="secondary">
<ion-icon name="menu"></ion-icon>
</button>

40
src/components/app/test/typography/main.html
View File

@@ -1,40 +0,0 @@
<ion-header>
<ion-toolbar>
<ion-title>Typography</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
<h2 primary>H2: The quick brown fox jumps over the lazy dog</h2>
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
<h4 danger>H4: The quick brown fox jumps over the lazy dog</h4>
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
<p>
I saw a werewolf with a Chinese menu in his hand.
Walking through the <sub danger>streets</sub> of Soho in the rain.
He <i primary>was</i> looking for a place called Lee Ho Fook's.
Gonna get a <a secondary>big dish of beef chow mein.</a>
</p>
<p>
He's the hairy-handed gent who ran amuck in Kent.
Lately he's been overheard in Mayfair.
Better stay away from him.
He'll rip your lungs out, Jim.
I'd like to meet his tailor.
<ion-icon danger name="cut"></ion-icon>
</p>
</ion-content>

5
src/components/badge/badge.ios.scss
View File

@@ -3,8 +3,13 @@
// iOS Badge
// --------------------------------------------------
/// @prop - Border radius of the badge
$badge-ios-border-radius: 10px !default;
/// @prop - Background color of the badge
$badge-ios-background-color: color($colors-ios, primary) !default;
/// @prop - Text color of the badge
$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default;

5
src/components/badge/badge.md.scss
View File

@@ -3,8 +3,13 @@
// Material Design Badge
// --------------------------------------------------
/// @prop - Border radius of the badge
$badge-md-border-radius: 4px !default;
/// @prop - Background color of the badge
$badge-md-background-color: color($colors-md, primary) !default;
/// @prop - Text color of the badge
$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default;

3
src/components/badge/badge.scss
View File

@@ -3,7 +3,10 @@
// Badge
// --------------------------------------------------
/// @prop - Font size of the badge
$badge-font-size: 1.3rem !default;
/// @prop - Font weight of the badge
$badge-font-weight: bold !default;

53
src/components/badge/badge.ts
View File

@@ -1,4 +1,4 @@
import { Directive, ElementRef, Renderer, Attribute } from '@angular/core';
import { Directive, ElementRef, Input, Renderer } from '@angular/core';
import { Config } from '../../config/config';
@@ -9,46 +9,47 @@ import { Config } from '../../config/config';
* @description
* Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.
* @see {@link /docs/v2/components/#badges Badges Component Docs}
*/
@Directive({
selector: 'ion-badge'
})
export class Badge {
/** @internal */
_color: string;
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
constructor(
config: Config,
private _elementRef: ElementRef,
private _renderer: Renderer
) {
let element = _elementRef.nativeElement;
) { }
this._readAttrs(element);
/**
* @internal
*/
_updateColor(newColor: string) {
this._setElementColor(this._color, false);
this._setElementColor(newColor, true);
this._color = newColor;
}
/**
* @private
* @internal
*/
private _readAttrs(element: HTMLElement) {
let elementAttrs = element.attributes;
let attrName: string;
for (let i = 0, l = elementAttrs.length; i < l; i++) {
if (elementAttrs[i].value !== '') continue;
attrName = elementAttrs[i].name;
// Ignore attributes item-left, item-right
if (attrName.indexOf('item') === -1) {
this._setClass(attrName);
}
_setElementColor(color: string, isAdd: boolean) {
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `badge-${color}`, isAdd);
}
}
/**
* @private
*/
private _setClass(color: string) {
this._renderer.setElementClass(this._elementRef.nativeElement, 'badge-' + color, true);
}
}

5
src/components/badge/badge.wp.scss
View File

@@ -3,8 +3,13 @@
// Windows Badge
// --------------------------------------------------
/// @prop - Border radius of the badge
$badge-wp-border-radius: 0 !default;
/// @prop - Background color of the badge
$badge-wp-background-color: color($colors-wp, primary) !default;
/// @prop - Text color of the badge
$badge-wp-text-color: color-contrast($colors-wp, $badge-wp-background-color) !default;

4
src/components/badge/test/basic/e2e.ts Normal file
View File

@@ -0,0 +1,4 @@
it('should toggle color', function() {
element(by.css('.e2eBadgeToggleColor')).click();
});

8
src/components/badge/test/basic/index.ts
View File

@@ -5,7 +5,13 @@ import { ionicBootstrap } from '../../../../../src';
@Component({
templateUrl: 'main.html'
})
class E2EPage {}
class E2EPage {
dynamicColor: string = 'secondary';
toggleColor() {
this.dynamicColor = (this.dynamicColor == 'secondary' ? 'danger' : 'secondary');
}
}
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'

28
src/components/badge/test/basic/main.html
View File

@@ -19,24 +19,28 @@
</ion-item>
<ion-item>
Primary Badge
<ion-badge item-right primary>99</ion-badge>
<ion-badge item-right color="primary">99</ion-badge>
</ion-item>
<ion-item>
Secondary Badge
<ion-badge item-right secondary>99</ion-badge>
<ion-badge item-right color="secondary">99</ion-badge>
</ion-item>
<ion-item>
Danger Badge
<ion-badge item-right danger>99</ion-badge>
<ion-badge item-right color="danger">99</ion-badge>
</ion-item>
<ion-item>
Light Badge
<ion-badge item-right light>99</ion-badge>
<ion-badge item-right color="light">99</ion-badge>
</ion-item>
<ion-item>
Dark Badge
<ion-badge item-right dark>99</ion-badge>
<ion-badge item-right color="dark">99</ion-badge>
</ion-item>
<button ion-item (click)="toggleColor()" class="e2eBadgeToggleColor">
Dynamic Secondary Badge (Toggle)
<ion-badge item-right [color]="dynamicColor">99</ion-badge>
</button>
</ion-list>
<ion-list>
@@ -49,24 +53,28 @@
</ion-item>
<ion-item>
Primary Badge
<ion-badge item-left primary>99</ion-badge>
<ion-badge item-left color="primary">99</ion-badge>
</ion-item>
<ion-item>
Secondary Badge
<ion-badge item-left secondary>99</ion-badge>
<ion-badge item-left color="secondary">99</ion-badge>
</ion-item>
<ion-item>
Danger Badge
<ion-badge item-left danger>99</ion-badge>
<ion-badge item-left color="danger">99</ion-badge>
</ion-item>
<ion-item>
Light Badge
<ion-badge item-left light>99</ion-badge>
<ion-badge item-left color="light">99</ion-badge>
</ion-item>
<ion-item>
Dark Badge
<ion-badge item-left dark>99</ion-badge>
<ion-badge item-left color="dark">99</ion-badge>
</ion-item>
<button ion-item (click)="toggleColor()">
Dynamic Secondary Badge (Toggle)
<ion-badge item-left [color]="dynamicColor">99</ion-badge>
</button>
</ion-list>
</ion-content>

137
src/components/button/button.ts
View File

@@ -1,8 +1,7 @@
import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Optional, Renderer, ViewEncapsulation } from '@angular/core';
import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
import { Config } from '../../config/config';
import { isTrueProperty } from '../../util/util';
import { Toolbar } from '../toolbar/toolbar';
/**
@@ -37,13 +36,13 @@ import { Toolbar } from '../toolbar/toolbar';
* <!-- Colors -->
* <button ion-button>Default</button>
*
* <button ion-button secondary>Secondary</button>
* <button ion-button color="secondary">Secondary</button>
*
* <button ion-button danger>Danger</button>
* <button ion-button color="danger">Danger</button>
*
* <button ion-button light>Light</button>
* <button ion-button color="light">Light</button>
*
* <button ion-button dark>Dark</button>
* <button ion-button color="dark">Dark</button>
*
* <!-- Shapes -->
* <button ion-button full>Full Button</button>
@@ -98,12 +97,12 @@ import { Toolbar } from '../toolbar/toolbar';
})
export class Button {
private _role: string = 'button'; // bar-button
private _mt: boolean = false; // menutoggle
private _size: string = null; // large/small/default
private _style: string = 'default'; // outline/clear/solid
private _shape: string = null; // round/fab
private _display: string = null; // block/full
private _colors: Array<string> = []; // primary/secondary
private _icon: string = null; // left/right/only
private _color: string = null; // primary/secondary
private _disabled: boolean = false; // disabled
private _init: boolean;
@@ -163,6 +162,14 @@ export class Button {
this._attr('_shape', 'round', val);
}
/**
* @input {string} A floating action button.
*/
@Input()
set fab(val: boolean) {
this._attr('_shape', 'fab', val);
}
/**
* @input {string} A button that fills its parent container with a border-radius.
*/
@@ -180,6 +187,9 @@ export class Button {
}
_attr(type: string, attrName: string, attrValue: boolean) {
if (type === '_style') {
this._setColor(this._color, isTrueProperty(attrValue));
}
this._setClass(this[type], false);
if (isTrueProperty(attrValue)) {
this[type] = attrName;
@@ -187,9 +197,7 @@ export class Button {
} else {
// Special handling for '_style' which defaults to 'default'.
this[type] = (type === '_style' ? 'default' : null);
}
if (type === '_style') {
this._setColor(attrName, isTrueProperty(attrValue));
this._setClass(this[type], true);
}
}
@@ -197,16 +205,12 @@ export class Button {
* @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
*/
@Input()
set color(val: string|string[]) {
// Clear the colors for all styles including the default one.
this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false);
// Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc).
this._colors = (val instanceof Array ? val : [val]);
// Set the colors for the currently effective style.
this._setColor(this._style, true);
set color(val: string) {
this._updateColor(val);
}
constructor(
@Attribute('menuToggle') menuToggle: string,
@Attribute('ion-button') ionButton: string,
config: Config,
private _elementRef: ElementRef,
@@ -226,7 +230,11 @@ export class Button {
this.setRole(ionButton);
}
this._readAttrs(element);
// menuToggle can be added with or without a string
// but if the attribute isn't added it will be null
if (menuToggle !== null) {
this._mt = true;
}
}
/**
@@ -238,10 +246,12 @@ export class Button {
}
/**
* @private
* @internal
*/
ngAfterContentChecked() {
this._assignCss(true);
_updateColor(newColor: string) {
this._setColor(this._color, false);
this._setColor(newColor, true);
this._color = newColor;
}
/**
@@ -260,86 +270,51 @@ export class Button {
this._assignCss(true);
}
/**
* @private
*/
private _readAttrs(element: HTMLElement) {
let elementAttrs = element.attributes;
let attrName: string;
for (let i = 0, l = elementAttrs.length; i < l; i++) {
if (elementAttrs[i].value !== '') continue;
attrName = elementAttrs[i].name;
if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) {
this._style = attrName;
} else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
this._display = attrName;
} else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
this._shape = attrName;
} else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
this._size = attrName;
} else if (!(IGNORE_ATTRS.test(attrName))) {
this._colors.push(attrName);
}
}
}
/**
* @private
*/
private _assignCss(assignCssClass: boolean) {
let role = this._role;
if (role) {
this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
this._setClass('menutoggle', this._mt); // menutoggle
this._setClass(this._style, assignCssClass); // button-clear
this._setClass(this._shape, assignCssClass); // button-round
this._setClass(this._display, assignCssClass); // button-full
this._setClass(this._size, assignCssClass); // button-small
this._setClass(this._icon, assignCssClass); // button-icon-left
this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary
this._setColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
}
}
/**
* @private
* @internal
*/
private _setClass(type: string, assignCssClass: boolean) {
_setClass(type: string, assignCssClass: boolean) {
if (type && this._init) {
this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass);
}
}
/**
* @private
* @internal
*/
private _setColor(type: string|string[], assignCssClass: boolean) {
if (type && this._init) {
// Support array to allow removal of many styles at once.
let styles = (type instanceof Array ? type : [type]);
styles.forEach(styleName => {
// If the role is not a bar-button, don't apply the solid style
styleName = (this._role !== 'bar-button' && styleName === 'solid' ? 'default' : styleName);
let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : '');
this._colors.forEach(colorName => {
this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
});
});
_setColor(color: string, isAdd: boolean) {
if (color && this._init) {
// The class should begin with the button role
// button, bar-button
let className = this._role;
// If the role is not a bar-button, don't apply the solid style
let style = this._style;
style = (this._role !== 'bar-button' && style === 'solid' ? 'default' : style);
className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : '');
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `${className}-${color}`, isAdd);
}
}
}
}
}
const BUTTON_SIZE_ATTRS = ['large', 'small', 'default'];
const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
const IGNORE_ATTRS = /_ng|button|left|right/;
const TEXT = 1;
const ICON = 2;

1
src/components/button/test/attributes/e2e.ts Normal file
View File

@@ -0,0 +1 @@

64
src/components/button/test/attributes/index.ts Normal file
View File

@@ -0,0 +1,64 @@
import { Component } from '@angular/core';
import { App, ionicBootstrap } from '../../../../../src';
@Component({
templateUrl: 'main.html'
})
class E2EPage {
isFull: boolean = true;
isBlock: boolean = true;
isBarClear: boolean = true;
// Styles
isSolid: boolean = true;
isOutline: boolean = true;
isClear: boolean = true;
// Colors
isSecondary: string = 'secondary';
isDanger: string = 'danger';
isDark: string = 'dark';
constructor(app: App) {
}
toggleBlock() {
this.isFull = !this.isFull;
this.isBlock = !this.isBlock;
}
// Toggles solid, outline, and clear buttons
toggleStyles() {
this.isSolid = !this.isSolid;
this.isOutline = !this.isOutline;
this.isClear = !this.isClear;
}
// Toggles the colors on the buttons (secondary, danger, dark)
toggleColors() {
this.isSecondary = (this.isSecondary === 'secondary' ? '' : 'secondary');
this.isDanger = (this.isDanger === 'danger' ? '' : 'danger');
this.isDark = (this.isDark === 'dark' ? '' : 'dark');
}
toggleBarClear() {
this.isBarClear = !this.isBarClear;
}
removeColors() {
this.isSecondary = null;
this.isDanger = null;
this.isDark = null;
}
}
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class E2EApp {
rootPage = E2EPage;
}
ionicBootstrap(E2EApp);

51
src/components/button/test/attributes/main.html Normal file
View File

@@ -0,0 +1,51 @@
<ion-header>
<ion-toolbar>
<ion-buttons end>
<button ion-button>Default</button>
<button ion-button solid>Solid</button>
<button ion-button outline>Outline</button>
<button ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding style="text-align:center" no-bounce>
<h5>Button Displays</h5>
<button ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</button>
<button ion-button [full]="isFull">Full</button>
<button ion-button full block>Both</button>
<h5>Button Styles (Click to Toggle)</h5>
<button ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</button>
<button ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</button>
<button ion-button [clear]="isClear" (click)="toggleStyles()">Clear</button>
<h5>Button Sizes</h5>
<button ion-button small="true">Small</button>
<button ion-button default="true">Default</button>
<button ion-button large>Large</button>
<h5>Button Colors (Click to Toggle)</h5>
<button ion-button block [color]="isSecondary" (click)="toggleColors()">Block</button>
<button ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</button>
<button ion-button outline [color]="isDark" (click)="toggleColors()">Outline</button>
<button ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</button>
<button ion-button (click)="removeColors()">Remove Colors</button>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-buttons end>
<button ion-button color="secondary">Default</button>
<button ion-button solid color="danger">Solid</button>
<button ion-button outline color="dark">Outline</button>
<button ion-button clear color="secondary">Clear</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

20
src/components/button/test/basic/main.html
View File

@@ -15,28 +15,28 @@
</p>
<p>
<button ion-button primary>Primary</button>
<button ion-button primary class="activated">Primary.activated</button>
<button ion-button color="primary">Primary</button>
<button ion-button color="primary" class="activated">Primary.activated</button>
</p>
<p>
<button ion-button secondary>Secondary</button>
<button ion-button secondary class="activated">Secondary.activated</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="secondary" class="activated">Secondary.activated</button>
</p>
<p>
<button ion-button danger>Danger</button>
<button ion-button danger class="activated">Danger.activated</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="danger" class="activated">Danger.activated</button>
</p>
<p>
<button ion-button light>Light</button>
<button ion-button light class="activated">Light.activated</button>
<button ion-button color="light">Light</button>
<button ion-button color="light" class="activated">Light.activated</button>
</p>
<p>
<button ion-button dark>Dark</button>
<button ion-button dark class="activated">Dark.activated</button>
<button ion-button color="dark">Dark</button>
<button ion-button color="dark" class="activated">Dark.activated</button>
</p>
<p>

8
src/components/button/test/block/main.html
View File

@@ -20,13 +20,13 @@
</p>
<p>
<a ion-button block outline secondary href="#">a[ion-button][block][outline][secondary]</a>
<button ion-button block outline secondary>button[ion-button][block][outline][secondary]</button>
<a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
<button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
</p>
<p>
<a ion-button block clear dark href="#">a[ion-button][block][clear][dark]</a>
<button ion-button block clear dark>button[ion-button][clear][block][dark]</button>
<a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
<button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
</p>
<p>

2
src/components/button/test/button.spec.ts
View File

@@ -211,7 +211,7 @@ export function run() {
nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
}
};
let b = new Button(ionButton, config, elementRef, renderer, null);
let b = new Button(null, ionButton, config, elementRef, renderer, null);
b._init = true;
return b;
}

20
src/components/button/test/clear/main.html
View File

@@ -15,28 +15,28 @@
</p>
<p>
<button ion-button clear primary>Primary</button>
<button ion-button clear primary class="activated">Primary.activated</button>
<button ion-button clear color="primary">Primary</button>
<button ion-button clear color="primary" class="activated">Primary.activated</button>
</p>
<p>
<button ion-button clear secondary>Secondary</button>
<button ion-button clear secondary class="activated">Secondary.activated</button>
<button ion-button clear color="secondary">Secondary</button>
<button ion-button clear color="secondary" class="activated">Secondary.activated</button>
</p>
<p>
<button ion-button clear danger>Danger</button>
<button ion-button clear danger class="activated">Danger.activated</button>
<button ion-button clear color="danger">Danger</button>
<button ion-button clear color="danger" class="activated">Danger.activated</button>
</p>
<p>
<button ion-button clear light>Light</button>
<button ion-button clear light class="activated">Light.activated</button>
<button ion-button clear color="light">Light</button>
<button ion-button clear color="light" class="activated">Light.activated</button>
</p>
<p>
<button ion-button clear dark>Dark</button>
<button ion-button clear dark class="activated">Dark.activated</button>
<button ion-button clear color="dark">Dark</button>
<button ion-button clear color="dark" class="activated">Dark.activated</button>
</p>
<p>

2
src/components/button/test/dynamic/index.ts
View File

@@ -32,7 +32,6 @@ class E2EPage {
this.isClicked = false;
this.myColor1 = 'primary';
this.myColor2 = 'primary';
this.multiColor = ['primary'];
}
reset() {
@@ -45,7 +44,6 @@ class E2EPage {
this.isClicked = false;
this.myColor1 = 'custom1';
this.myColor2 = 'custom2';
this.multiColor = ['primary', 'secondary'];
}
toggle() {

12
src/components/button/test/dynamic/main.html
View File

@@ -2,7 +2,7 @@
<ion-toolbar>
<ion-buttons start>
<button ion-button danger *ngIf="showIf">ngIf</button>
<button ion-button color="danger" *ngIf="showIf">ngIf</button>
<button ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
@@ -21,14 +21,10 @@
<button ion-button block [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">Secondary (Clear)</button>
<button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
<button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
<button ion-button block primary light [clear]="isClear" [round]="isCustom">Multicolor (Clear)</button>
<button ion-button block danger dark [outline]="isOutline" [round]="isCustom">Multicolor (Outline)</button>
<button ion-button block [color]="multiColor" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Outline (Toggle)</button>
<button ion-button block [color]="multiColor" [clear]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Clear (Toggle)</button>
<hr/>
<button ion-button block outline danger (click)="showIf = !showIf">Toggle Header</button>
<button ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</button>
<hr/>
<button ion-button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
<button ion-button block clear danger (click)="reset()">Reset all buttons</button>
<button ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
<button ion-button block clear color="danger" (click)="reset()">Reset all buttons</button>
</ion-content>

10
src/components/button/test/fab/main.html
View File

@@ -3,23 +3,23 @@
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-center fab-top secondary>
<button ion-button fab fab-center fab-top color="secondary">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-right fab-top danger>
<button ion-button fab fab-right fab-top color="danger">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-left fab-bottom light>
<button ion-button fab fab-left fab-bottom color="light">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-center fab-bottom primary>
<button ion-button fab fab-center fab-bottom color="primary">
<ion-icon name="add"></ion-icon>
</button>
<button ion-button fab fab-right fab-bottom dark>
<button ion-button fab fab-right fab-bottom color="dark">
<ion-icon name="add"></ion-icon>
</button>
</ion-content>

12
src/components/button/test/full/main.html
View File

@@ -26,18 +26,18 @@
</p>
<p>
<a ion-button full outline secondary href="#">a[ion-button][full][outline][secondary]</a>
<button ion-button full outline secondary>button[ion-button][full][outline][secondary]</button>
<a ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</a>
<button ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</button>
</p>
<p>
<a ion-button full clear light href="#">a[ion-button][full][clear][light]</a>
<button ion-button full clear light>button[ion-button][full][clear][light]</button>
<a ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</a>
<button ion-button full clear color="light">button[ion-button][full][clear][light]</button>
</p>
<p>
<a ion-button full clear dark href="#">a[ion-button][full][clear][dark]</a>
<button ion-button full clear dark>button[ion-button][full][clear][dark]</button>
<a ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</a>
<button ion-button full clear color="dark">button[ion-button][full][clear][dark]</button>
</p>
</ion-content>

24
src/components/button/test/outline/main.html
View File

@@ -15,28 +15,28 @@
</p>
<p>
<button ion-button outline primary>Primary</button>
<button ion-button outline primary class="activated">Primary.activated</button>
<button ion-button outline color="primary">Primary</button>
<button ion-button outline color="primary" class="activated">Primary.activated</button>
</p>
<p>
<button ion-button outline secondary>Secondary</button>
<button ion-button outline secondary class="activated">Secondary.activated</button>
<button ion-button outline color="secondary">Secondary</button>
<button ion-button outline color="secondary" class="activated">Secondary.activated</button>
</p>
<p>
<button ion-button outline danger>Danger</button>
<button ion-button outline danger class="activated">Danger.activated</button>
<button ion-button outline color="danger">Danger</button>
<button ion-button outline color="danger" class="activated">Danger.activated</button>
</p>
<p>
<button ion-button outline light>Light</button>
<button ion-button outline light class="activated">Light.activated</button>
<button ion-button outline color="light">Light</button>
<button ion-button outline color="light" class="activated">Light.activated</button>
</p>
<p>
<button ion-button outline dark>Dark</button>
<button ion-button outline dark class="activated">Dark.activated</button>
<button ion-button outline color="dark">Dark</button>
<button ion-button outline color="dark" class="activated">Dark.activated</button>
</p>
<p>
@@ -48,11 +48,11 @@
</p>
<p>
<button ion-button outline block secondary>button[ion-button][outline][block][secondary]</button>
<button ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</button>
</p>
<p>
<button ion-button outline block secondary class="activated">[outline][block][secondary].activated</button>
<button ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</button>
</p>
<p>

16
src/components/button/test/round/main.html
View File

@@ -10,16 +10,16 @@
<ion-content padding>
<button ion-button round>button</button>
<button ion-button round light>button light</button>
<button ion-button round secondary>button secondary</button>
<button ion-button round danger>button danger</button>
<button ion-button round dark>button dark</button>
<button ion-button round color="light">button light</button>
<button ion-button round color="secondary">button secondary</button>
<button ion-button round color="danger">button danger</button>
<button ion-button round color="dark">button dark</button>
<button ion-button round outline>button</button>
<button ion-button round light outline>button light</button>
<button ion-button round secondary outline>button secondary</button>
<button ion-button round danger outline>button danger</button>
<button ion-button round dark outline>button dark</button>
<button ion-button round color="light" outline>button light</button>
<button ion-button round color="secondary" outline>button secondary</button>
<button ion-button round color="danger" outline>button danger</button>
<button ion-button round color="dark" outline>button dark</button>
</ion-content>

2
src/components/card/test/advanced/main.html
View File

@@ -78,7 +78,7 @@
</button>
</ion-col>
<ion-col no-padding text-right>
<button ion-button icon-left clear small danger class="activated">
<button ion-button icon-left clear small color="danger" class="activated">
<ion-icon name="share"></ion-icon>
Activated
</button>

2
src/components/checkbox/checkbox.ios.scss
View File

@@ -105,7 +105,7 @@ ion-checkbox {
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
ion-checkbox[#{$color-name}] .checkbox-checked {
.checkbox-#{$color-name} .checkbox-checked {
border-color: $color-base;
background-color: $color-base;

2
src/components/checkbox/checkbox.md.scss
View File

@@ -122,7 +122,7 @@ ion-checkbox + .item-inner ion-label {
@mixin checkbox-theme-md($color-name, $color-base, $color-contrast) {
ion-checkbox[#{$color-name}] .checkbox-checked {
.checkbox-#{$color-name} .checkbox-checked {
border-color: $color-base;
background-color: $color-base;

41
src/components/checkbox/checkbox.ts
View File

@@ -1,9 +1,9 @@
import { AfterContentInit, Component, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Provider, ViewEncapsulation } from '@angular/core';
import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Provider, Renderer, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Form } from '../../util/form';
import { Item } from '../item/item';
import { isTrueProperty } from '../../util/util';
import { Item } from '../item/item';
export const CHECKBOX_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => Checkbox), multi: true});
@@ -75,11 +75,26 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr
private _labelId: string;
private _fn: Function;
/** internal */
private _color: string;
/**
* @private
*/
id: string;
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
/**
* @output {Checkbox} expression to evaluate when the checkbox value changes
*/
@@ -87,7 +102,9 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr
constructor(
private _form: Form,
@Optional() private _item: Item
@Optional() private _item: Item,
private _elementRef: ElementRef,
private _renderer: Renderer
) {
_form.register(this);
@@ -98,6 +115,24 @@ export class Checkbox implements AfterContentInit, ControlValueAccessor, OnDestr
}
}
/**
* @internal
*/
_updateColor(newColor: string) {
this._setElementColor(this._color, false);
this._setElementColor(newColor, true);
this._color = newColor;
}
/**
* @internal
*/
_setElementColor(color: string, isAdd: boolean) {
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `checkbox-${color}`, isAdd);
}
}
/**
* @private
*/

2
src/components/checkbox/checkbox.wp.scss
View File

@@ -115,7 +115,7 @@ ion-checkbox + .item-inner ion-label {
@mixin checkbox-theme-wp($color-name, $color-base, $color-contrast) {
ion-checkbox[#{$color-name}] .checkbox-checked {
.checkbox-#{$color-name} .checkbox-checked {
border-color: $color-base;
background-color: $color-base;

1
src/components/checkbox/test/basic/index.ts
View File

@@ -14,6 +14,7 @@ class E2EPage {
strawberryValue: boolean;
standAloneChecked: boolean;
formResults: string;
dangerColor: string = 'danger';
constructor() {
this.fruitsForm = new FormGroup({

6
src/components/checkbox/test/basic/main.html
View File

@@ -35,17 +35,17 @@
<ion-item>
<ion-label>Kiwi, (ionChange) Secondary color</ion-label>
<ion-checkbox secondary (ionChange)="kiwiChange($event)"></ion-checkbox>
<ion-checkbox color="secondary" (ionChange)="kiwiChange($event)"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Strawberry, (ionChange) [checked]="true"</ion-label>
<ion-checkbox light (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
<ion-checkbox color="light" (ionChange)="strawberryChange($event)" [checked]="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
<ion-checkbox item-right danger checked></ion-checkbox>
<ion-checkbox item-right [color]="dangerColor" checked></ion-checkbox>
</ion-item>
<button ion-item detail-none>

16
src/components/icon/icon.ios.scss Normal file
View File

@@ -0,0 +1,16 @@
@import "./icon";
// iOS Icon
// --------------------------------------------------
// Generate iOS Icon Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
.icon-#{$color-name} {
color: $color-base;
}
}

16
src/components/icon/icon.md.scss Normal file
View File

@@ -0,0 +1,16 @@
@import "./icon";
// Material Design Icon
// --------------------------------------------------
// Generate Material Design Icon Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
.icon-#{$color-name} {
color: $color-base;
}
}

33
src/components/icon/icon.ts
View File

@@ -47,6 +47,21 @@ export class Icon {
private _md: string = '';
private _css: string = '';
/** @internal */
_color: string;
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
/**
* @private
*/
@@ -167,4 +182,22 @@ export class Icon {
this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
}
/**
* @internal
*/
_updateColor(newColor: string) {
this._setElementColor(this._color, false);
this._setElementColor(newColor, true);
this._color = newColor;
}
/**
* @internal
*/
_setElementColor(color: string, isAdd: boolean) {
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `icon-${color}`, isAdd);
}
}
}

16
src/components/icon/icon.wp.scss Normal file
View File

@@ -0,0 +1,16 @@
@import "./icon";
// Windows Icon
// --------------------------------------------------
// Generate Windows Icon Colors
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
.icon-#{$color-name} {
color: $color-base;
}
}

1
src/components/icon/test/basic/index.ts
View File

@@ -17,6 +17,7 @@ class E2EPage {
'logo-apple'
];
btnIcon: string;
dynamicColor: string = 'danger';
constructor() {
this.btnIcon = this.icons[0];

6
src/components/icon/test/basic/main.html
View File

@@ -12,7 +12,7 @@
<ion-list>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
<ion-icon name="home" item-left [color]="dynamicColor"></ion-icon>
<code>
name="home"
</code>
@@ -54,14 +54,14 @@
</ion-item>
<ion-item>
<ion-icon name="md-home" item-left></ion-icon>
<ion-icon name="md-home" color="primary" item-left></ion-icon>
<code>
name="md-home"
</code>
</ion-item>
<ion-item>
<ion-icon name="logo-twitter" item-left></ion-icon>
<ion-icon name="logo-twitter" color="secondary" item-left></ion-icon>
<code>
name="logo-twitter"
</code>

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>

6
src/components/input/test/floating-labels/main.html
View File

@@ -35,7 +35,7 @@
</ion-item>
<ion-item>
<ion-label floating primary>Floating Label 4: {{ myValues.value2 }}</ion-label>
<ion-label floating color="primary">Floating Label 4: {{ myValues.value2 }}</ion-label>
<ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
<button ion-button outline item-right>
View
@@ -43,12 +43,12 @@
</ion-item>
<ion-item>
<ion-label floating secondary>Floating Label 5</ion-label>
<ion-label floating color="secondary">Floating Label 5</ion-label>
<ion-input type="url"></ion-input>
</ion-item>
<ion-item>
<ion-label floating danger>Floating Label 6</ion-label>
<ion-label floating color="danger">Floating Label 6</ion-label>
<ion-input type="email"></ion-input>
<ion-avatar item-right>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">

2
src/components/input/test/input-focus/main.html
View File

@@ -1,6 +1,6 @@
<ion-header>
<ion-toolbar primary>
<ion-toolbar color="primary">
<ion-title>Inset Focus</ion-title>
<ion-buttons end>
<button ion-button (click)="reload()">

2
src/components/item/item-sliding.ts
View File

@@ -108,7 +108,7 @@ const enum SlidingState {
* </ion-item>
* <ion-item-options side="left">
* <button ion-button (click)="favorite(item)">Favorite</button>
* <button ion-button danger (click)="share(item)">Share</button>
* <button ion-button color="danger" (click)="share(item)">Share</button>
* </ion-item-options>
* <ion-item-options side="right">

8
src/components/item/item.ios.scss
View File

@@ -225,7 +225,13 @@ ion-item-divider {
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-item-divider[#{$color-name}] {
// If there is text with a color it should use this color
// and override whatever item sets it to
.item .text-#{$color-name} {
color: $color-base;
}
.item-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}

8
src/components/item/item.md.scss
View File

@@ -216,7 +216,13 @@ ion-item-divider {
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
ion-item-divider[#{$color-name}] {
// If there is text with a color it should use this color
// and override whatever item sets it to
.item .text-#{$color-name} {
color: $color-base;
}
.item-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}

37
src/components/item/item.ts
View File

@@ -257,7 +257,7 @@ import { Label } from '../label/label';
* Item
* </ion-item>
* <ion-item-options>
* <button ion-button primary (click)="archive()">Archive</button>
* <button ion-button color="primary" (click)="archive()">Archive</button>
* </ion-item-options>
* </ion-item-sliding>
*
@@ -307,6 +307,21 @@ export class Item {
*/
labelId: string = null;
/** @internal */
_color: string;
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
constructor(form: Form, private _renderer: Renderer, private _elementRef: ElementRef) {
this.id = form.nextId().toString();
}
@@ -403,6 +418,26 @@ export class Item {
this._renderer.setElementStyle(this._elementRef.nativeElement, property, value);
}
/**
* @internal
*/
_updateColor(newColor: string, colorClass?: string) {
this._setElementColor(this._color, false, colorClass);
this._setElementColor(newColor, true, colorClass);
this._color = newColor;
}
/**
* @internal
*/
_setElementColor(color: string, isAdd: boolean, colorClass?: string) {
colorClass = colorClass || 'item'; // item-radio
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `${colorClass}-${color}`, isAdd);
}
}
/**
* @private
*/

8
src/components/item/item.wp.scss
View File

@@ -205,7 +205,13 @@ ion-item-divider {
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
ion-item-divider[#{$color-name}] {
// If there is text with a color it should use this color
// and override whatever item sets it to
.item .text-#{$color-name} {
color: $color-base;
}
.item-#{$color-name} {
color: $color-contrast;
background-color: $color-base;
}

12
src/components/item/test/dividers/main.html
View File

@@ -28,11 +28,11 @@
</ion-item-group>
<ion-item-group>
<ion-item-divider dark>
<ion-item-divider color="dark">
<button ion-button item-left clear>
<ion-icon name="cloudy"></ion-icon>
</button>
<button ion-button item-left clear light>
<button ion-button item-left clear color="light">
<ion-icon name="rainy"></ion-icon>
</button>
Dark
@@ -48,12 +48,12 @@
</ion-item-group>
<ion-item-group>
<ion-item-divider light>
<ion-item-divider color="light">
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
Light
<button ion-button item-right clear danger>
<button ion-button item-right clear color="danger">
<ion-icon name="sunny"></ion-icon>
</button>
</ion-item-divider>
@@ -64,7 +64,7 @@
</ion-item-group>
<ion-item-group>
<ion-item-divider primary>
<ion-item-divider color="primary">
Primary
<ion-thumbnail item-right>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
@@ -77,7 +77,7 @@
</ion-item-group>
<ion-item-group>
<ion-item-divider secondary>Secondary</ion-item-divider>
<ion-item-divider color="secondary">Secondary</ion-item-divider>
<ion-item>
<ion-label>

2
src/components/item/test/reorder/main.html
View File

@@ -1,5 +1,5 @@
<ion-header>
<ion-toolbar primary>
<ion-toolbar color="primary">
<ion-title>Item Reorder</ion-title>
<ion-buttons end>
<button ion-button (click)="toggle()">

2
src/components/item/test/text/main.html
View File

@@ -39,7 +39,7 @@
<ion-item text-wrap>
<h3>H3 Title Text</h3>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p color="secondary">Paragraph line 2 secondary</p>
</ion-item>
<ion-item text-wrap>

5
src/components/label/label.ios.scss
View File

@@ -67,7 +67,10 @@ ion-label[floating] {
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
ion-label[#{$color-name}] {
.label-#{$color-name},
.item-input .label-#{$color-name},
.item-select .label-#{$color-name},
.item-datetime .label-#{$color-name} {
color: $color-base;
}

5
src/components/label/label.md.scss
View File

@@ -72,7 +72,10 @@ ion-label[floating] {
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
ion-label[#{$color-name}] {
.label-#{$color-name},
.item-input .label-#{$color-name},
.item-select .label-#{$color-name},
.item-datetime .label-#{$color-name} {
color: $color-base;
}

33
src/components/label/label.ts
View File

@@ -56,6 +56,21 @@ import { Attribute, Directive, ElementRef, Renderer, Input } from '@angular/core
})
export class Label {
private _id: string;
/** @internal */
_color: string;
/**
* @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
*/
@Input()
get color(): string {
return this._color;
}
set color(value: string) {
this._updateColor(value);
}
/**
* @private
@@ -103,4 +118,22 @@ export class Label {
this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
}
/**
* @internal
*/
_updateColor(newColor: string) {
this._setElementColor(this._color, false);
this._setElementColor(newColor, true);
this._color = newColor;
}
/**
* @internal
*/
_setElementColor(color: string, isAdd: boolean) {
if (color !== null && color !== '') {
this._renderer.setElementClass(this._elementRef.nativeElement, `label-${color}`, isAdd);
}
}
}

5
src/components/label/label.wp.scss
View File

@@ -66,7 +66,10 @@ ion-label[floating] {
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
ion-label[#{$color-name}] {
.label-#{$color-name},
.item-input .label-#{$color-name},
.item-select .label-#{$color-name},
.item-datetime .label-#{$color-name} {
color: $color-base;
}

2
src/components/list/test/headers/main.html
View File

@@ -13,7 +13,7 @@
<ion-list-header>
List Header
<ion-icon item-right name="star" primary></ion-icon>
<ion-icon item-right name="star" color="primary"></ion-icon>
</ion-list-header>
<ion-item>

10
src/components/loading/test/basic/main.html
View File

@@ -14,11 +14,11 @@
<button ion-button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
<button ion-button block (click)="presentLoadingCircles()">Circles Spinner</button>
<button ion-button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
<button ion-button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
<button ion-button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
<button ion-button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
<button ion-button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
<button ion-button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
<button ion-button block (click)="presentLoadingDefault()" color="secondary" class="e2eLoadingDefaultSpinner">Default Spinner</button>
<button ion-button block (click)="presentLoadingCustom()" color="light">Custom Spinner</button>
<button ion-button block (click)="presentLoadingText()" color="dark">Content Only w/ Nav</button>
<button ion-button block (click)="presentLoadingMultiple()" color="danger">Multiple Loading</button>
<button ion-button block (click)="presentLoadingMultipleNav()" color="danger">Multiple Nav Loading</button>
</ion-content>

6
src/components/menu/test/basic/main.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" side="left" persistent="true" (ionDrag)="onDrag($event)" (ionOpen)="onOpen($event)" (ionClose)="onClose($event)">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
@@ -70,7 +70,7 @@
</ion-content>
<ion-footer>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
@@ -81,7 +81,7 @@
<ion-menu [content]="content" side="right">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>

2
src/components/menu/test/basic/page1.html
View File

@@ -22,7 +22,7 @@
</button>
</ion-buttons>
<button ion-button menuToggle="right" right secondary>
<button ion-button menuToggle="right" right color="secondary">
<ion-icon name="menu"></ion-icon>
</button>

4
src/components/menu/test/disable-swipe/main.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" side="left">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
@@ -21,7 +21,7 @@
<ion-menu [content]="content" side="right" swipeEnabled="false">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Right Menu</ion-title>
</ion-toolbar>
</ion-header>

6
src/components/menu/test/enable-disable/main.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" id="menu1">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
@@ -29,7 +29,7 @@
<ion-menu [content]="content" id="menu2">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>
@@ -56,7 +56,7 @@
<ion-menu [content]="content" id="menu3">
<ion-header>
<ion-toolbar primary>
<ion-toolbar color="primary">
<ion-title>Menu 3</ion-title>
</ion-toolbar>
</ion-header>

4
src/components/menu/test/multiple/main.html
View File

@@ -1,7 +1,7 @@
<ion-menu [content]="content" id="menu1">
<ion-header>
<ion-toolbar secondary>
<ion-toolbar color="secondary">
<ion-title>Menu 1</ion-title>
</ion-toolbar>
</ion-header>
@@ -20,7 +20,7 @@
<ion-menu [content]="content" id="menu2">
<ion-header>
<ion-toolbar danger>
<ion-toolbar color="danger">
<ion-title>Menu 2</ion-title>
</ion-toolbar>
</ion-header>

Some files were not shown because too many files have changed in this diff Show More