1

I'm using Ionic React to build a mobile app. I want to create a horizontal scrollable component that exceeds screen width to display categories. I can't seem to find the right Ionic components to use for that.

Any help?

Fanis Mahmalat
  • 777
  • 6
  • 13

3 Answers3

1

you can use Ion Slides and put each of your cases in one slide.

Like this:

<ion-slides pager="true" [options]="slideOpts">
    <ion-slide *ngFor="let item of items">
        <h1>some slide</h1>
    </ion-slide>
</ion-slides>

and slideOpts can be one of the examples in this page.

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54
1

I have done horizontal scrolling in ionic react by :

<IonSlides pager="true" scrollbar="true" watchOverflow="false" >
 <IonSlide>
        <IonCard style={{width:"142px",height:"112px"}}>
                <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
                <IonRow size="12" style={{marginTop:"9px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Chadwick Boseman</IonLabel>
                    </div>
                </IonRow>
                <IonRow size="12" style={{marginTop:"5px"}}>
                    <div>
                        <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                    </div>
                </IonRow>
                </IonGrid>
           
        </IonCard> 
      <IonSlide>
      <IonCard style={{width:"142px",height:"112px"}}>
            
            <IonGrid style={{background:"transparent",paddingTop:"15px",paddingLeft:"14px"}}>
            <IonRow size="12" style={{marginTop:"9px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>Rajesh Buhair</IonLabel>
                </div>
            </IonRow>
            <IonRow size="12" style={{marginTop:"5px"}}>
                <div>
                    <IonLabel style={{fontSize:"11px",fontFamily:"Lato-Light",color:"#0B1D34"}}>+6591876258</IonLabel>
                </div>
            </IonRow>
            </IonGrid>
       
    </IonCard>
 </IonSlide>
</IonSlides>
SYED FAISAL
  • 495
  • 5
  • 8
-1

You can use the IonContent component giving it a scrollX property and a fixed width. the internal component that wraps the items (direct child) should be giving fixed width of 100vh.

<IonContent>
  <!-- the rest of your code -->

<IonContent style={{ height: `45px` }} scrollX >
                <div style={{ width: `100vh` }}>
                    <Items></Items>
                </div>
            </IonContent>

    <!-- the rest of your code -->
Oben Desmond
  • 1