ion-infinite-scroll-content
ion-infinite-scroll-content
コンポーネントは、ion-infinite-scroll
で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。loadingSpinner
and loadingText
プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。
React
ion-infinite-scroll-content
コンポーネントではReactではサポートされていません。
利用方法
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data…">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
CopyCopied
<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>
CopyCopied
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>
];
}
}
CopyCopied
<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
}
});
CopyCopied
プロパティ
loadingSpinner | |
---|---|
Description | An animated SVG spinner that shows while loading. |
Attribute | loading-spinner |
Type | "bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined |
loadingText | |
Description | Optional text to display while loading. For more information: Security Documentation |
Attribute | loading-text |
Type | IonicSafeString | string | undefined |