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

chore(): sync with main for GitHub Actions

Browse Source 
chore(): sync with main for GitHub Actions
This commit is contained in:
Liam DeBeasi
2021-11-02 17:14:00 -04:00
committed by GitHub
parent 27aef9343c 2ce8011805
commit ff25ac14fa
49 changed files with 14330 additions and 18107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,6 @@
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.
<!-- Auto Generated Below -->
@ -39,6 +35,25 @@ The `ion-infinite-scroll-content` component is not supported in React.
```
### React
```tsx
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>
);
```
### Stencil
```tsx

15
core/src/components/infinite-scroll-content/usage/react.md Normal file
View File

@ -0,0 +1,15 @@
```tsx
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>
);
```

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

@ -123,6 +123,104 @@ function toggleInfiniteScroll() {
```
### React
```tsx
import {
IonButton,
IonContent,
IonHeader,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter
} from '@ionic/react';
import { useState } from 'react';
const InfiniteScrollExample: React.FC = () => {
const [data, setData] = useState<string[]>([]);
const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
const pushData = () => {
const max = data.length + 20;
const min = max - 20;
const newData = [];
for (let i = min; i < max; i++) {
newData.push('Item' + i);
}
setData([
...data,
...newData
]);
}
const loadData = (ev: any) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
if (data.length == 1000) {
setInfiniteDisabled(true);
}
}, 500);
}
useIonViewWillEnter(() => {
pushData();
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
Toggle Infinite Scroll
</IonButton>
<IonList>
{data.map((item, index) => {
return (
<IonItem key={index}>
<IonLabel>{item}</IonLabel>
</IonItem>
)
})}
</IonList>
<IonInfiniteScroll
onIonInfinite={loadData}
threshold="100px"
disabled={isInfiniteDisabled}
>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
export default InfiniteScrollExample;
```
### Stencil
```tsx

94
core/src/components/infinite-scroll/usage/react.md Normal file
View File

@ -0,0 +1,94 @@
```tsx
import {
IonButton,
IonContent,
IonHeader,
IonInfiniteScroll,
IonInfiniteScrollContent,
IonItem,
IonLabel,
IonList,
IonPage,
IonTitle,
IonToolbar,
useIonViewWillEnter
} from '@ionic/react';
import { useState } from 'react';
const InfiniteScrollExample: React.FC = () => {
const [data, setData] = useState<string[]>([]);
const [isInfiniteDisabled, setInfiniteDisabled] = useState(false);
const pushData = () => {
const max = data.length + 20;
const min = max - 20;
const newData = [];
for (let i = min; i < max; i++) {
newData.push('Item' + i);
}
setData([
...data,
...newData
]);
}
const loadData = (ev: any) => {
setTimeout(() => {
pushData();
console.log('Loaded data');
ev.target.complete();
if (data.length == 1000) {
setInfiniteDisabled(true);
}
}, 500);
}
useIonViewWillEnter(() => {
pushData();
});
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonButton onClick={() => setInfiniteDisabled(!isInfiniteDisabled)} expand="block">
Toggle Infinite Scroll
</IonButton>
<IonList>
{data.map((item, index) => {
return (
<IonItem key={index}>
<IonLabel>{item}</IonLabel>
</IonItem>
)
})}
</IonList>
<IonInfiniteScroll
onIonInfinite={loadData}
threshold="100px"
disabled={isInfiniteDisabled}
>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data..."
></IonInfiniteScrollContent>
</IonInfiniteScroll>
</IonContent>
</IonPage>
);
};
export default InfiniteScrollExample;
```