ionic react refresher 2

import React, { useState } from 'react';
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:

http://chuanshuoge2.blogspot.com/2020/04/ionic-react_20.html

ionic react refresher

pull down to trigger refresh

data is updated

import React, { useState } from 'react';
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))
        event.detail.complete();
      })
      .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></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:
https://www.tutorialsteacher.com/typescript/arrow-function

ionic react range

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner, IonRadioGroup, IonRadio,
  IonRange,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import { sunny } from 'ionicons/icons';

const Tab3: React.FC = () => {
  const [value, setValue] = useState(0);
  const [rangeValue, setRangeValue] = useState<{
    lower: number;
    upper: number;
  }>({ lower: 0, upper: 0 });

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonRange Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        <IonList>
          <IonItemDivider>Default</IonItemDivider>
          <IonItem>
            <IonRange pin={true} value={value} onIonChange={e => setValue(e.detail.value as number)} />
          </IonItem>
          <IonItem>
            <IonLabel>Value: {value}</IonLabel>
          </IonItem>

          <IonItemDivider>Min & Max</IonItemDivider>
          <IonItem>
            <IonRange min={-200} max={200} color="secondary">
              <IonLabel slot="start">-200</IonLabel>
              <IonLabel slot="end">200</IonLabel>
            </IonRange>
          </IonItem>

          <IonItemDivider>Icons</IonItemDivider>
          <IonItem>
            <IonRange min={20} max={80} step={2}>
              <IonIcon size="small" slot="start" icon={sunny} />
              <IonIcon slot="end" icon={sunny} />
            </IonRange>
          </IonItem>

          <IonItemDivider>With Snaps & Ticks</IonItemDivider>
          <IonItem>
            <IonRange min={1000} max={2000} step={100} snaps={true} color="secondary" />
          </IonItem>

          <IonItemDivider>With Snaps & No Ticks</IonItemDivider>
          <IonItem>
            <IonRange min={1000} max={2000} step={100} snaps={true} ticks={false} color="secondary" />
          </IonItem>

          <IonItemDivider>Dual Knobs</IonItemDivider>
          <IonItem>
            <IonRange dualKnobs={true} min={0} max={60} step={3} snaps={true} onIonChange={e => setRangeValue(e.detail.value as any)} />
          </IonItem>
          <IonItem>
            <IonLabel>Value: lower: {rangeValue.lower} upper: {rangeValue.upper}</IonLabel>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

ionic react spinner

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover, IonSpinner
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Spinner Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        {/*-- Default Spinner --*/}
        <IonSpinner />

        {/*-- Lines --*/}
        <IonSpinner name="lines" color='primary' />

        {/*-- Lines Small --*/}
        <IonSpinner name="lines-small" color='secondary' />

        {/*-- Dots --*/}
        <IonSpinner name="dots" color='tertiary' />

        {/*-- Bubbles --*/}
        <IonSpinner name="bubbles" color='success' />

        {/*-- Circles --*/}
        <IonSpinner name="circles" color='warning' />

        {/*-- Crescent --*/}
        <IonSpinner name="crescent" color='medium' />

        {/*-- Paused Default Spinner --*/}
        <IonSpinner paused />
      </IonContent>
    </IonPage>

  );
};

export default Tab3;

艾叔 - 豪宅就这么回事

ionic react skeleton text

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar, IonSkeletonText,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle,
  call
} from 'ionicons/icons';

type dataType = {
  heading: string
  para1: string
  para2: string
}

const Tab2: React.FC = () => {
  const [data, setData] = useState<dataType>();

  setTimeout(() => {
    setData({
      heading: 'Normal text',
      para1: 'Lorem ipsum dolor sit amet, consectetur',
      para2: 'adipiscing elit.'
    });
  }, 5000);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>SkeletonText Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {data ? (
          <>
            <div className="ion-padding">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar
              arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt
              vehicula.
          </div>

            <IonList>
              <IonListHeader>
                <IonLabel>
                  Data
              </IonLabel>
              </IonListHeader>
              <IonItem>
                <IonAvatar slot="start">
                  <img src="./avatar.svg" />
                </IonAvatar>
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
              <IonItem>
                <IonThumbnail slot="start">
                  <img src="./thumbnail.svg" />
                </IonThumbnail>
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
              <IonItem>
                <IonIcon icon={call} slot="start" />
                <IonLabel>
                  <h3>{data.heading}</h3>
                  <p>{data.para1}</p>
                  <p>{data.para2}</p>
                </IonLabel>
              </IonItem>
            </IonList>
          </>
        ) : (
            <>
              <div className="ion-padding custom-skeleton">
                <IonSkeletonText animated style={{ width: '60%' }} />
                <IonSkeletonText animated />
                <IonSkeletonText animated style={{ width: '88%' }} />
                <IonSkeletonText animated style={{ width: '70%' }} />
                <IonSkeletonText animated style={{ width: '60%' }} />
              </div>

              <IonList>
                <IonListHeader>
                  <IonLabel>
                    <IonSkeletonText animated style={{ width: '20%' }} />
                  </IonLabel>
                </IonListHeader>
                <IonItem>
                  <IonAvatar slot="start">
                    <IonSkeletonText animated />
                  </IonAvatar>
                  <IonLabel>
                    <h3>
                      <IonSkeletonText animated style={{ width: '50%' }} />
                    </h3>
                    <p>
                      <IonSkeletonText animated style={{ width: '80%' }} />
                    </p>
                    <p>
                      <IonSkeletonText animated style={{ width: '60%' }} />
                    </p>
                  </IonLabel>
                </IonItem>
                <IonItem>
                  <IonThumbnail slot="start">
                    <IonSkeletonText animated />
                  </IonThumbnail>
                  <IonLabel>
                    <h3>
                      <IonSkeletonText animated style={{ width: '50%' }} />
                    </h3>
                    <p>
                      <IonSkeletonText animated style={{ width: '80%' }} />
                    </p>
                    <p>
                      <IonSkeletonText animated style={{ width: '60%' }} />
                    </p>
                  </IonLabel>
                </IonItem>
                <IonItem>
                  <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
                  <IonLabel>
                    <h3>
                      <IonSkeletonText animated style={{ width: '50%' }} />
                    </h3>
                    <p>
                      <IonSkeletonText animated style={{ width: '80%' }} />
                    </p>
                    <p>
                      <IonSkeletonText animated style={{ width: '60%' }} />
                    </p>
                  </IonLabel>
                </IonItem>
              </IonList>
            </>
          )}
      </IonContent>
    </IonPage >
  )
}

export default Tab2;

ionic react progressbar

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading, IonProgressBar
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle
} from 'ionicons/icons';

const Tab2: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Progressbar Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default Progressbar --*/}
        <IonProgressBar></IonProgressBar><br />

        {/*-- Default Progressbar with 50 percent --*/}
        <IonProgressBar value={0.5}></IonProgressBar><br />

        {/*-- Colorize Progressbar --*/}
        <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
        <IonProgressBar color="secondary" value={0.5}></IonProgressBar><br />

        {/*-- Other types --*/}
        <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
        <IonProgressBar type="indeterminate"></IonProgressBar><br />
        <IonProgressBar type="indeterminate" reversed={true}></IonProgressBar><br />
      </IonContent>
    </IonPage >
  )
}

export default Tab2;