Saturday, 25 April 2020

ionic react slide




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,
  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