ion-infinite-scroll-content
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.
React
The ion-infinite-scroll-content
component is not supported in React.
Usage
- ANGULAR
- JAVASCRIPT
- STENCIL
- VUE
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more dataβ¦">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more dataβ¦">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
import { Component, h } from '@stencil/core';
@Component({
tag: 'infinite-scroll-content-example',
styleUrl: 'infinite-scroll-content-example.css',
})
export class InfiniteScrollContentExample {
render() {
return [
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data..."
></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>,
];
}
}
<template>
<ion-page>
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more dataβ¦">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonPage
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonContent,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonPage
}
});
Properties
loadingSpinner
Description | An animated SVG spinner that shows while loading. |
Attribute | loading-spinner |
Type | "bubbles" ο½ "circles" ο½ "circular" ο½ "crescent" ο½ "dots" ο½ "lines" ο½ "lines-small" ο½ null ο½ undefined |
Default | undefined |
loadingText
Description | Optional text to display while loading. loadingText can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become <Ionic> For more information: Security Documentation |
Attribute | loading-text |
Type | IonicSafeString ο½ string ο½ undefined |
Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.