import {
IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton, IonCard, IonCardHeader,
IonCardSubtitle, IonCardTitle, IonCardContent,
IonItem, IonIcon, IonLabel, IonBadge, IonList,
IonItemDivider, IonCheckbox, IonChip, IonAvatar,
IonGrid, IonRow, IonCol, IonInput, IonToggle,
IonModal, IonRefresher, IonRefresherContent,
IonTextarea,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'
const Tab1: React.FC = () => {
const [data, setdata] = useState<string>('data')
let doRefresh = (event: CustomEvent<RefresherEventDetail>) => {
axios({
method: 'get',
url: 'https://api.exchangeratesapi.io/latest?base=CAD',
})
.then(response => {
setdata(JSON.stringify(response.data.rates))
setTimeout(() => {
event.detail.complete();
}, 2000);
})
.catch(function (error) {
alert(error);
doRefresh(event)
})
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Refresher Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent >
{/*-- Default Refresher --*/}
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</IonRefresherContent>
</IonRefresher>
<IonList>
<IonItemDivider>pull down to refresh</IonItemDivider>
<IonItem>
<IonTextarea
rows={10}
readonly
value={data}>
</IonTextarea>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
export default Tab1;
reference:
No comments:
Post a Comment