javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(infinite-scroll): update infinite scroll readme files and usage

Browse Source
This commit is contained in:
Brandy Carney
2018-07-05 18:09:58 -04:00
parent e304db0d45
commit 8555acb397
5 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/infinite-scroll-content/readme.md
View File

@ -1,7 +1,6 @@
# ion-infinite-scroll-content
InfiniteScrollContent is a component that adds the content to InfiniteScroll.
You can loading icon or loading text with the component's properties.
The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
<!-- Auto Generated Below -->

10
core/src/components/infinite-scroll-content/usage/angular.md Normal file
View File

@ -0,0 +1,10 @@
```html
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data…">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
```

4
core/src/components/infinite-scroll-content/usage/javascript.md
View File

@ -2,8 +2,8 @@
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data…">
loading-spinner="bubbles"
loading-text="Loading more data…">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

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

@ -1,29 +1,16 @@
# 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.
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page.
The expression assigned to the `ionInfinite` 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.
The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance.
## Infinite Scroll Content
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 or add text by adding properties to the
`ion-infinite-scroll-content` component.
The `ion-infinite-scroll` component has the infinite scroll logic. It requires a child component in order to display content. Ionic uses its `ion-infinite-scroll-content` component by default. This component displays the infinite scroll and changes the look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. However, the default spinner can be changed and text can be added by setting properties on the `ion-infinite-scroll-content` component.
## Further Customizing Infinite Scroll Content
## Custom Content
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.
You could replace our default content with custom SVG or CSS animations.
Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations.
<!-- Auto Generated Below -->

4
core/src/components/infinite-scroll/usage/javascript.md
View File

@ -3,8 +3,8 @@
<ion-list></ion-list>
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
loading-spinner="bubbles"
loading-text="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>