//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, logoYoutube
} from 'ionicons/icons';
const Tab3: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>FabExamples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonFab vertical="bottom" horizontal="end">
<IonFabButton size='small'>
<IonIcon icon={share} />
</IonFabButton>
<IonFabList side="top">
<IonFabButton color="light">
<IonIcon icon={logoFacebook} />
</IonFabButton>
<IonFabButton color="secondary">
<IonIcon icon={logoTwitter} />
</IonFabButton>
<IonFabButton color='dark'>
<IonIcon icon={logoYoutube} />
</IonFabButton>
</IonFabList>
<IonFabList side="start">
<IonFabButton color="primary">
<IonIcon icon={logoVimeo} />
</IonFabButton>
</IonFabList>
</IonFab>
</IonContent>
</IonPage>
);
};
export default Tab3;
No comments:
Post a Comment