mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
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:
@ -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);
|
||||
}
|
||||
}
|
@ -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>
|
Reference in New Issue
Block a user