ion-infinite-scroll-content
コンテンツ
ion-infinite-scroll-content
コンポーネントは、ion-infinite-scroll
で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。loadingSpinner
and loadingText
プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。
使い方
- Angular
- Javascript
- React
- 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 React from 'react';
import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
export const InfiniteScrollExample: React.FC = () => (
<IonContent>
<IonInfiniteScroll>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data...">
</IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
);
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
}
});
プロパティ
loadingSpinner
Description | An animated SVG spinner that shows while loading. |
Attribute | loading-spinner |
Type | "bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "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 |
イベント
No events available for this component.
メソッド
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSSカスタムプロパティ
No CSS custom properties available for this component.
Slots
No slots available for this component.