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,
IonReorder, IonReorderGroup, IonSlide, IonSlides
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
closeCircle, home, star, navigate,
informationCircle, checkmarkCircle, shuffle,
call, pizza
} from 'ionicons/icons';
import { ItemReorderEventDetail } from '@ionic/core';
const slideOpts = {
initialSlide: 1,
speed: 400
};
const Tab2: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Slide Examples</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonSlides pager={true} options={slideOpts}>
<IonSlide>
<div style={{ height: 400 }}>
<h1>Slide 1</h1>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</IonSlide>
<IonSlide>
<div style={{ height: 400 }}>
<h1>Slide 2</h1>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</IonSlide>
<IonSlide>
<div style={{ height: 400 }}>
<h1>Slide 3</h1>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
</IonSlide>
</IonSlides>
</IonContent>
</IonPage >
)
}
export default Tab2;
No comments:
Post a Comment