IonTabs inside a page

I need to have tabs inside a specific page.
This is my code:

<IonPage>
          <TopToolbar/>
        
          { showQrCodeModal ? (
            <IonModal isOpen={showQrCodeModal}>
              <QrCodeModal/>
              <IonButton slot="end" onClick={() => dismissQrCodeModal()}>
                {t("Cancel")}
              </IonButton>
            </IonModal>
        ) : null 
        }

        
        <IonContent>
        <IonGrid>
          <IonRow class="user-row">
            <IonCol class="ion-text-center" size="12">
              <IonText> <h2> <strong>{t("Hello")}, {name} </strong> </h2></IonText>
            </IonCol>
          </IonRow>

          <IonRow>
            <IonCol>
              <IonImg src={`${BASE_URL}/assets/images/slide6.svg`} className="dashboard-img" />
            </IonCol>
          </IonRow>


          <IonRow class="ion-text-center">
            <IonCol>
              <br />
              <IonButton onClick={(e) => clickQrCodeButton(e)}>
                {t("Scan QR Code")}
              </IonButton>
            </IonCol>
          </IonRow>

          <IonRow class="ion-text-center">
            <IonCol>
            </IonCol>
          </IonRow>
        </IonGrid>
        <IonTabs>
          <IonRouterOutlet>
          </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="schedule">
                <IonIcon icon={calendar} />
                <IonLabel>Schedule</IonLabel>
                <IonBadge>6</IonBadge>
              </IonTabButton>

              <IonTabButton tab="cart" href={PATH_VIRTUAL_CART}>
              <IonIcon icon={cartOutline} />
              <IonLabel>{t("Cart")}</IonLabel>
              </IonTabButton>

              <IonTabButton tab="map">
                {/* <IonIcon icon={map} /> */}
                <IonLabel>Map</IonLabel>
              </IonTabButton>

              <IonTabButton tab="about">
                <IonIcon icon={informationCircle} />
                <IonLabel>About</IonLabel>
              </IonTabButton>
            </IonTabBar>
         </IonTabs>
      </IonContent>
     </IonPage>

The problem is that I can’t see the tabs at the bottom of the page.
If I modify in the source of a page the <div class="ion-page ion-page-invisible"> setting opacity equal to 1 I see the bottom tabs in the right position but the content of the page is not clickable (probably the content is covered by the tabs container).
How can I solve?
What am I doing wrong?

1 post - 1 participant

Read full topic