diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 85b6d9f8f1..1ec5819229 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1053,7 +1053,7 @@ declare global {
import {
InfiniteScrollContent as IonInfiniteScrollContent
-} from './components/infinite-scroll/infinite-scroll-content';
+} from './components/infinite-scroll-content/infinite-scroll-content';
declare global {
interface HTMLIonInfiniteScrollContentElement extends IonInfiniteScrollContent, HTMLElement {
diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
similarity index 98%
rename from packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx
rename to packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index a77d938dc2..389784cceb 100644
--- a/packages/core/src/components/infinite-scroll/infinite-scroll-content.tsx
+++ b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -1,9 +1,7 @@
import { Component, Prop } from '@stencil/core';
import { Config } from '../../index';
-/**
- * @hidden
- */
+
@Component({
tag: 'ion-infinite-scroll-content'
})
diff --git a/packages/core/src/components/infinite-scroll-content/readme.md b/packages/core/src/components/infinite-scroll-content/readme.md
new file mode 100644
index 0000000000..445820d4e2
--- /dev/null
+++ b/packages/core/src/components/infinite-scroll-content/readme.md
@@ -0,0 +1,35 @@
+# ion-infinite-scroll-content
+
+
+
+
+
+
+## Properties
+
+#### loadingSpinner
+
+string
+
+
+#### loadingText
+
+string
+
+
+## Attributes
+
+#### loadingSpinner
+
+string
+
+
+#### loadingText
+
+string
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/infinite-scroll/readme.md b/packages/core/src/components/infinite-scroll/readme.md
index 12330c7cb4..689899c896 100644
--- a/packages/core/src/components/infinite-scroll/readme.md
+++ b/packages/core/src/components/infinite-scroll/readme.md
@@ -1,4 +1,4 @@
-# ion-infinite-scroll-content
+# ion-infinite-scroll
The Infinite Scroll allows you to perform an action when the user
scrolls a specified distance from the bottom or top of the page.
@@ -11,13 +11,13 @@ on the infinite scroll instance.
```html
-
- {% raw %}{{i}}{% endraw %}
-
+
+ {% raw %}{{i}}{% endraw %}
+
-
-
-
+
+
+
```
@@ -25,30 +25,31 @@ on the infinite scroll instance.
```ts
@Component({...})
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++) {
this.items.push( this.items.length );
}
- }
- doInfinite(infiniteScroll) {
- console.log('Begin async operation');
-
- setTimeout(() => {
- for (let i = 0; i < 30; i++) {
- this.items.push( this.items.length );
- }
-
- console.log('Async operation has ended');
- infiniteScroll.complete();
- }, 500);
- }
+ console.log('Async operation has ended');
+ infiniteScroll.complete();
+ }, 500);
+}
}
```
+
## `waitFor` method of InfiniteScroll
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
-
- {{item}}
-
+
+ {{item}}
+
-
-
-
+
+
+
```
@@ -71,31 +72,32 @@ In case if your async operation returns promise you can utilize
```ts
@Component({...})
export class NewsFeedPage {
- items = [];
+items = [];
- constructor() {
- for (var i = 0; i < 30; i++) {
- this.items.push( this.items.length );
- }
- }
-
- doInfinite(): Promise {
- 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);
- })
+constructor() {
+ for (var i = 0; i < 30; i++) {
+ this.items.push( this.items.length );
}
}
+
+doInfinite(): Promise {
+ 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
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
`ion-infinite-scroll-content` component.
- ```html
-
+```html
+
-
-
-
-
+
+
+
+
-
- ```
+
+```
## Further Customizing Infinite Scroll Content
@@ -133,28 +135,48 @@ You could replace our default content with custom SVG or CSS animations.
## Properties
-#### loadingSpinner
+#### enabled
+
+boolean
+
+
+#### position
string
-#### loadingText
+#### threshold
string
## Attributes
-#### loadingSpinner
+#### enabled
+
+boolean
+
+
+#### position
string
-#### loadingText
+#### threshold
string
+## Events
+
+#### ionInfinite
+
+
+## Methods
+
+#### complete()
+
+
----------------------------------------------
diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts
index 12fe24a629..4a5304f740 100644
--- a/packages/core/src/index.d.ts
+++ b/packages/core/src/index.d.ts
@@ -49,7 +49,7 @@ export {
export { Grid } from './components/grid/grid';
export { Header } from './components/header/header';
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 { Item } from './components/item/item';
export { ItemDivider } from './components/item-divider/item-divider';