refactor(refresher): allow refresher content customization

Breaking Change:

## Refresher:

- `<ion-refresher>` now takes a child `<ion-refresher-content>`
component.
- Custom refresh content components can now be replaced for Ionic's
default refresher content.
- Properties `pullingIcon`, `pullingText` and `refreshingText` have
been moved to the `<ion-refresher-content>` component.
- `spinner` property has been renamed to `refreshingSpinner` and now
goes on the `<ion-refresher-content>` component.
- `refreshingIcon` property is no longer an input, but instead
`refreshingSpinner` should be used.

Was:

```
<ion-refresher (refresh)="doRefresh($event)"
pullingIcon="arrow-dropdown">
</ion-refresher>
```

Now:

```
<ion-refresher (refresh)="doRefresh($event)">
  <ion-refresher-content
pullingIcon="arrow-dropdown"></ion-refresher-content>
</ion-refresher>
```
This commit is contained in:
Adam Bradley
2016-02-27 17:33:55 -06:00
parent d5ebf3ff5e
commit 91df5f97ee
21 changed files with 1296 additions and 811 deletions

View File

@ -1,39 +0,0 @@
import {App} from 'ionic-angular';
@App({
templateUrl: 'main.html'
})
class E2EApp {
items = [];
constructor() {
for(let i = 0; i < 20; i++) {
this.items.push({ "index": i });
}
}
doRefresh(refresher) {
console.log('Doing Refresh', refresher)
// Add to the top of the list on refresh
let firstIndex = this.items[0].index - 1;
for(let i = firstIndex; i > firstIndex - 5; i--) {
this.items.unshift({ "index": i });
}
setTimeout(() => {
refresher.complete();
console.log("Complete");
}, 5000);
}
doStart(refresher) {
console.log('Doing Start', refresher);
}
doPulling(refresher) {
console.log('Pulling', refresher);
}
}

View File

@ -1,18 +0,0 @@
<ion-toolbar><ion-title>Pull To Refresh</ion-title></ion-toolbar>
<ion-content>
<ion-refresher
(start)="doStart($event)"
(refresh)="doRefresh($event)"
(pulling)="doPulling($event)"
pullingIcon="heart"
pullingText="release to refresh..."
refreshingIcon="star"
refreshingText="refreshing...">
</ion-refresher>
<ion-list>
<ion-item *ngFor="#item of items">
Item {{ item.index }}
</ion-item>
</ion-list>
</ion-content>