ionic react fab

//tab3.tsx

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,

} from '@ionic/react';

import ExploreContainer from '../components/ExploreContainer';

import './Tab3.css';

import {

  add, settings, share, person,

  arrowForwardCircle, arrowBackCircle, arrowUpCircle,

  logoVimeo, logoFacebook, logoInstagram,

  logoTwitter

} from 'ionicons/icons';

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

  return (

    <IonPage>

      <IonHeader>

        <IonToolbar>

          <IonTitle>FabExamples</IonTitle>

        </IonToolbar>

      </IonHeader>

      <IonContent>

        {/*-- fab placed to the top end --*/}

        <IonFab vertical="top" horizontal="end" slot="fixed">

          <IonFabButton>

            <IonIcon icon={add} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the bottom end --*/}

        <IonFab vertical="bottom" horizontal="end" slot="fixed">

          <IonFabButton>

            <IonIcon icon={arrowForwardCircle} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the top start --*/}

        <IonFab vertical="top" horizontal="start" slot="fixed">

          <IonFabButton>

            <IonIcon icon={arrowBackCircle} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the bottom start --*/}

        <IonFab vertical="bottom" horizontal="start" slot="fixed">

          <IonFabButton>

            <IonIcon icon={arrowUpCircle} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the (vertical) center and start --*/}

        <IonFab vertical="center" horizontal="start" slot="fixed">

          <IonFabButton>

            <IonIcon icon={share} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the (vertical) center and end --*/}

        <IonFab vertical="center" horizontal="end" slot="fixed">

          <IonFabButton>

            <IonIcon icon={add} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}

        <IonFab vertical="top" horizontal="end" edge slot="fixed">

          <IonFabButton>

            <IonIcon icon={person} />

          </IonFabButton>

        </IonFab>

        {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}

        <IonFab vertical="bottom" horizontal="start" edge slot="fixed">

          <IonFabButton>

            <IonIcon icon={settings} />

          </IonFabButton>

          <IonFabList side="end">

            <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>

          </IonFabList>

        </IonFab>

        {/*-- fab placed in the center of the content with a list on each side --*/}

        <IonFab vertical="center" horizontal="center" slot="fixed">

          <IonFabButton>

            <IonIcon icon={share} />

          </IonFabButton>

          <IonFabList side="top">

            <IonFabButton><IonIcon icon={logoVimeo} /></IonFabButton>

          </IonFabList>

          <IonFabList side="bottom">

            <IonFabButton><IonIcon icon={logoFacebook} /></IonFabButton>

          </IonFabList>

          <IonFabList side="start">

            <IonFabButton><IonIcon icon={logoInstagram} /></IonFabButton>

          </IonFabList>

          <IonFabList side="end">

            <IonFabButton><IonIcon icon={logoTwitter} /></IonFabButton>

          </IonFabList>

        </IonFab>

      </IonContent>

    </IonPage>

  );

};

export default Tab3;