diff --git a/ionic/components/infinite-scroll/infinite-scroll-content.ts b/ionic/components/infinite-scroll/infinite-scroll-content.ts
index ec938d472e..3b00cc0534 100644
--- a/ionic/components/infinite-scroll/infinite-scroll-content.ts
+++ b/ionic/components/infinite-scroll/infinite-scroll-content.ts
@@ -10,7 +10,7 @@ import {Spinner} from '../spinner/spinner';
* @private
*/
@Component({
- selector: 'ion-infinite-content',
+ selector: 'ion-infinite-scroll-content',
template:
'
' +
'
' +
diff --git a/ionic/components/infinite-scroll/infinite-scroll.scss b/ionic/components/infinite-scroll/infinite-scroll.scss
index 4cca90b588..5b9245ea36 100644
--- a/ionic/components/infinite-scroll/infinite-scroll.scss
+++ b/ionic/components/infinite-scroll/infinite-scroll.scss
@@ -8,7 +8,7 @@ $infinite-scroll-loading-color: #666 !default;
$infinite-scroll-loading-text-margin: 4px 32px 0 32px !default;
-ion-infinite {
+ion-infinite-scroll {
display: block;
width: 100%;
}
@@ -17,7 +17,7 @@ ion-infinite {
// Infinite Scroll Content
// --------------------------------------------------
-ion-infinite-content {
+ion-infinite-scroll-content {
display: flex;
flex-direction: column;
justify-content: center;
@@ -39,6 +39,6 @@ ion-infinite-content {
// Infinite Scroll Content States
// --------------------------------------------------
-ion-infinite-content[state=disabled] .infinite-loading {
+ion-infinite-scroll-content[state=disabled] .infinite-loading {
display: none;
}
diff --git a/ionic/components/infinite-scroll/infinite-scroll.ts b/ionic/components/infinite-scroll/infinite-scroll.ts
index 94b9e03169..272726f334 100644
--- a/ionic/components/infinite-scroll/infinite-scroll.ts
+++ b/ionic/components/infinite-scroll/infinite-scroll.ts
@@ -6,13 +6,13 @@ import {Content} from '../content/content';
/**
* @name InfiniteScroll
* @description
- * The infinite scroll allows you to call a method whenever the user
- * gets to the bottom of the page or near the bottom of the page.
+ * The Infinite Scroll allows you to perform an action when the user
+ * scrolls a specified distance from the bottom of the page.
*
- * The expression you add to the `infinite` output event is called when
- * the user scrolls greater than distance away from the bottom of the
- * content. Once your `infinite` handler is done loading new data, it
- * should call the `endLoading()` method on the infinite scroll instance.
+ * The expression assigned to the `infinite` event is called when
+ * the user scrolls to the specified distance. When this expression
+ * has finished its tasks, it should call the `complete()` method
+ * on the infinite scroll instance.
*
* @usage
* ```html
@@ -22,9 +22,9 @@ import {Content} from '../content/content';
* {{i}}
*
*
- *
- *
- *
+ *
+ *
+ *
*
*
* ```
@@ -49,7 +49,7 @@ import {Content} from '../content/content';
* }
*
* console.log('Async operation has ended');
- * infiniteScroll.endLoading();
+ * infiniteScroll.complete();
* }, 500);
* }
*
@@ -59,20 +59,20 @@ import {Content} from '../content/content';
*
* ## Infinite Scroll Content
*
- * By default, Ionic provides the infinite scroll spinner that looks
+ * By default, Ionic uses the infinite scroll spinner that looks
* best for the platform the user is on. However, you can change the
- * default spinner, along with adding text by adding properties to
- * the child `ion-infinite-content` component.
+ * default spinner or add text by adding properties to the
+ * `ion-infinite-scroll-content` component.
*
* ```html
*
*
- *
- *
+ *
- *
- *
+ *
+ *
*
*
* ```
@@ -80,18 +80,17 @@ import {Content} from '../content/content';
*
* ## Further Customizing Infinite Scroll Content
*
- * The `ion-infinite` component holds the infinite scroll logic, and it
- * requires a child infinite scroll content component for its display.
- * The `ion-infinite-content` component is Ionic's default that shows
- * the actual display of the infinite scroll and changes its look depending
- * on the infinite scroll's state. With this separation, it also allows
+ * The `ion-infinite-scroll` component holds the infinite scroll logic.
+ * It requires a child component in order to display the content.
+ * Ionic uses `ion-infinite-scroll-content` by default. This component
+ * displays the infinite scroll and changes the look depending
+ * on the infinite scroll's state. Separating these components allows
* developers to create their own infinite scroll content components.
- * Ideas include having some cool SVG or CSS animations that are
- * customized to your app and animates to your liking.
+ * You could replace our default content with custom SVG or CSS animations.
*
*/
@Directive({
- selector: 'ion-infinite'
+ selector: 'ion-infinite-scroll'
})
export class InfiniteScroll {
private _lastCheck: number = 0;
@@ -107,11 +106,11 @@ export class InfiniteScroll {
/**
* @input {string} The threshold distance from the bottom
* of the content to call the `infinite` output event when scrolled.
- * The threshold input value can be either a percent, or
+ * The threshold value can be either a percent, or
* in pixels. For example, use the value of `10%` for the `infinite`
- * output event to get called when the scroll has 10% of the scroll
- * left until it reaches the bottom. Use the value `100px` when the
- * scroll is within 100 pixels from the bottom of the content.
+ * output event to get called when the user has scrolled 10%
+ * from the bottom of the page. Use the value `100px` when the
+ * scroll is within 100 pixels from the bottom of the page.
* Default is `15%`.
*/
@Input()
@@ -132,8 +131,8 @@ export class InfiniteScroll {
/**
* @output {event} The expression to call when the scroll reaches
- * the threshold input distance. From within your infinite handler,
- * you must call the infinite scroll's `endLoading()` method when
+ * the threshold distance. From within your infinite handler,
+ * you must call the infinite scroll's `complete()` method when
* your async operation has completed.
*/
@Output() infinite: EventEmitter = new EventEmitter();
@@ -194,7 +193,7 @@ export class InfiniteScroll {
}
/**
- * Call `endLoading()` within the `infinite` output event handler when
+ * Call `complete()` within the `infinite` output event handler when
* your async operation has completed. For example, the `loading`
* state is while the app is performing an asynchronous operation,
* such as receiving more data from an AJAX request to add more items
@@ -203,7 +202,7 @@ export class InfiniteScroll {
* This method will change the infinite scroll's state from `loading`
* to `enabled`.
*/
- endLoading() {
+ complete() {
this.state = STATE_ENABLED;
}
diff --git a/ionic/components/infinite-scroll/test/basic/index.ts b/ionic/components/infinite-scroll/test/basic/index.ts
index ed23a6fa90..a515f1c747 100644
--- a/ionic/components/infinite-scroll/test/basic/index.ts
+++ b/ionic/components/infinite-scroll/test/basic/index.ts
@@ -22,7 +22,7 @@ class E2EApp {
}
console.log('Finished receiving data, async operation complete');
- infiniteScroll.endLoading();
+ infiniteScroll.complete();
if (this.items.length > 90) {
infiniteScroll.enable(false);
diff --git a/ionic/components/infinite-scroll/test/basic/main.html b/ionic/components/infinite-scroll/test/basic/main.html
index 6c7a1610c1..f0af47b484 100644
--- a/ionic/components/infinite-scroll/test/basic/main.html
+++ b/ionic/components/infinite-scroll/test/basic/main.html
@@ -8,11 +8,11 @@
-
-
+
-
-
+
+