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

chore(infinite-scroll): move infinite-scroll-content to separate directory

Browse Source
This commit is contained in:
Adam Bradley
2017-11-28 20:55:22 -06:00
parent 5ab026bfb7
commit d61a48aab8
5 changed files with 122 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components.d.ts vendored
View File

@ -1053,7 +1053,7 @@ declare global {
import { import {
InfiniteScrollContent as IonInfiniteScrollContent InfiniteScrollContent as IonInfiniteScrollContent
} from './components/infinite-scroll/infinite-scroll-content'; } from './components/infinite-scroll-content/infinite-scroll-content';
declare global { declare global {
interface HTMLIonInfiniteScrollContentElement extends IonInfiniteScrollContent, HTMLElement { interface HTMLIonInfiniteScrollContentElement extends IonInfiniteScrollContent, HTMLElement {

4
packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx → packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View File

@ -1,9 +1,7 @@
import { Component, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Config } from '../../index'; import { Config } from '../../index';
/**
* @hidden
*/
@Component({ @Component({
tag: 'ion-infinite-scroll-content' tag: 'ion-infinite-scroll-content'
}) })

35
packages/core/src/components/infinite-scroll-content/readme.md Normal file
View File

@ -0,0 +1,35 @@
# ion-infinite-scroll-content
<!-- Auto Generated Below -->
## Properties
#### loadingSpinner
string
#### loadingText
string
## Attributes
#### loadingSpinner
string
#### loadingText
string
----------------------------------------------
*Built by [StencilJS](https://stenciljs.com/)*

146
packages/core/src/components/infinite-scroll/readme.md
View File

@ -1,4 +1,4 @@
# ion-infinite-scroll-content # ion-infinite-scroll
The Infinite Scroll allows you to perform an action when the user The Infinite Scroll allows you to perform an action when the user
scrolls a specified distance from the bottom or top of the page. scrolls a specified distance from the bottom or top of the page.
@ -11,13 +11,13 @@ on the infinite scroll instance.
```html ```html
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-itemngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item> <ion-itemngFor="let i of items">{% raw %}{{i}}{% endraw %}</ion-item>
</ion-list> </ion-list>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
``` ```
@ -25,30 +25,31 @@ on the infinite scroll instance.
```ts ```ts
@Component({...}) @Component({...})
export class NewsFeedPage { export class NewsFeedPage {
items = []; items = [];
constructor() { constructor() {
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
this.items.push( this.items.length ); this.items.push( this.items.length );
} }
}
doInfinite(infiniteScroll) { console.log('Async operation has ended');
console.log('Begin async operation'); infiniteScroll.complete();
}, 500);
setTimeout(() => { }
for (let i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
} }
``` ```
## `waitFor` method of InfiniteScroll ## `waitFor` method of InfiniteScroll
In case if your async operation returns promise you can utilize In case if your async operation returns promise you can utilize
@ -57,13 +58,13 @@ In case if your async operation returns promise you can utilize
```html ```html
<ion-content> <ion-content>
<ion-list> <ion-list>
<ion-itemngFor="let item of items">{{item}}</ion-item> <ion-itemngFor="let item of items">{{item}}</ion-item>
</ion-list> </ion-list>
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())"> <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
``` ```
@ -71,31 +72,32 @@ In case if your async operation returns promise you can utilize
```ts ```ts
@Component({...}) @Component({...})
export class NewsFeedPage { export class NewsFeedPage {
items = []; items = [];
constructor() { constructor() {
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
this.items.push( this.items.length ); this.items.push( this.items.length );
}
}
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
resolve();
}, 500);
})
} }
} }
doInfinite(): Promise<any> {
console.log('Begin async operation');
return new Promise((resolve) => {
setTimeout(() => {
for (var i = 0; i < 30; i++) {
this.items.push( this.items.length );
}
console.log('Async operation has ended');
resolve();
}, 500);
})
}
}
``` ```
## Infinite Scroll Content ## Infinite Scroll Content
By default, Ionic uses the infinite scroll spinner that looks By default, Ionic uses the infinite scroll spinner that looks
@ -103,18 +105,18 @@ best for the platform the user is on. However, you can change the
default spinner or add text by adding properties to the default spinner or add text by adding properties to the
`ion-infinite-scroll-content` component. `ion-infinite-scroll-content` component.
```html ```html
<ion-content> <ion-content>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content <ion-infinite-scroll-content
loadingSpinner="bubbles" loadingSpinner="bubbles"
loadingText="Loading more data..."> loadingText="Loading more data...">
</ion-infinite-scroll-content> </ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</ion-content> </ion-content>
``` ```
## Further Customizing Infinite Scroll Content ## Further Customizing Infinite Scroll Content
@ -133,28 +135,48 @@ You could replace our default content with custom SVG or CSS animations.
## Properties ## Properties
#### loadingSpinner #### enabled
boolean
#### position
string string
#### loadingText #### threshold
string string
## Attributes ## Attributes
#### loadingSpinner #### enabled
boolean
#### position
string string
#### loadingText #### threshold
string string
## Events
#### ionInfinite
## Methods
#### complete()
---------------------------------------------- ----------------------------------------------

2
packages/core/src/index.d.ts vendored
View File

@ -49,7 +49,7 @@ export {
export { Grid } from './components/grid/grid'; export { Grid } from './components/grid/grid';
export { Header } from './components/header/header'; export { Header } from './components/header/header';
export { InfiniteScroll } from './components/infinite-scroll/infinite-scroll'; export { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
export { InfiniteScrollContent } from './components/infinite-scroll/infinite-scroll-content'; export { InfiniteScrollContent } from './components/infinite-scroll-content/infinite-scroll-content';
export { Input } from './components/input/input'; export { Input } from './components/input/input';
export { Item } from './components/item/item'; export { Item } from './components/item/item';
export { ItemDivider } from './components/item-divider/item-divider'; export { ItemDivider } from './components/item-divider/item-divider';