How to hide tabs bar for sub-pages

Ionic Framework
1

Hi I would like to perform the same effect at this video.
Being able to go to a sub page with the sub page on top of his parent. (the tabs is hidden)
Screen Recording 2024-01-21 at 9

Screen Recording 2024-01-21 at 9 (1)

On my ionic 7 project, I can’t implement this effect. I got some sort of black background color showing instead of the parent page, here is my code.


setupIonicReact(
  { navAnimation: iosTransitionAnimation }
);

const Tabs = () => {
  return (
    <IonTabs>
      <IonRouterOutlet>
        <Route exact path="/app/tab1" component={Tab1} />
      </IonRouterOutlet>
      <IonTabBar slot="bottom">
        <IonTabButton tab="tab1" href="/app/tab1" >
          <IonIcon icon={searchOutline} />
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  )
}

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        test tab1
        <IonButton routerLink="/detailsonly" >go to detail</IonButton>
      </IonContent>
    </IonPage>
  )
}

const Detail: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>Home</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        Detail page
      </IonContent>
    </IonPage>
  )
}

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/app" component={Tabs} />
        <Route path="/detailsonly" component={Detail} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

export default App;
2

When one page pops up and covers another, that effect is called a modal, so you can implement a modal component. There’s no need to hide the tab bar because you will be hiding the entire page below the page that pops up.

3

Thank you for your reply.

A modal won’t act the same as a page, since a modal doesn’t have is own route.

4

If you want to give the modal a route, you can use something like use-route-as-state to display the modal based on the query string.

Or you can hide the tabbar, but this won’t give you the “page on top” effect shown in your example.

5

There is actually a way to show a modal the same way as on the video above ? (not from the bottom)

6

Yes, you can give modals whatever animation you want.

7

I will give it a try thank you.

Its true that somehow, it’s more a modal than a page…