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.