Extra toolbar on top of IonTabBar

Ionic Framework
1

I am trying to build an audio player in Ionic.

What I’m having problems with is how to implement a bar on top of the tabs. (Screenshot attached of what I’m hoping to do).

Now I could easily position it absolute on top of everything, but that would create some weird side effects to manage. What I really was hoping for, was for it to be included in the flex layout between the div.tabs-inner element and the ion-tab-bar.

Anyone have any suggestions on how to do that? :slight_smile:

image

2

Hi @MartinMouritzen,

best way would be to put the custom bar between <ion-tabs> and <ion-tab-bar slot="bottom">.

Here is an example of my customer audio player bar:

IMG_3681.jpg1125×521 66 KB

HTML:

<ion-tabs>
  <div class="box-shadow">
    <app-audio-player-item *ngIf="podcastEpisodeGuid$ | push as guid" size="tiny" lines="none" [guid]="guid">
    </app-audio-player-item>

    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="news">
        <ion-icon src="/assets/ui/tab-bar/icon-news.svg"></ion-icon>
        <ion-label>News</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="kurse">
        <ion-icon src="/assets/ui/tab-bar/icon-kurse.svg"></ion-icon>
        <ion-label>Kurse</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="magazine">
        <ion-icon src="/assets/ui/tab-bar/icon-magazin.svg"></ion-icon>
        <ion-label>Magazin</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="podcast">
        <ion-icon src="/assets/ui/tab-bar/icon-podcast.svg"></ion-icon>
        <ion-label>Podcast</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="video-player">
        <ion-icon src="/assets/ui/tab-bar/icon-video.svg"></ion-icon>
        <ion-label>Video</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </div>
</ion-tabs>
1 Like
3

Thank you very much for your reply.

I am unsure why, but this does not work for me. I am unsure if it has something to do with me using the React version, or if I am just not using it right :smiley:

I basically have a layout like:

<IonApp>
  <IonReactRouter>
    <IonTabs>
      <IonRouterOutlet id="main">
         ...routes
      </IonRouterOutlet>
      <IonTabBar>...</IonTabBar>
    </IonTabs>
  </IonReactRouter>
</IonApp>

and if I try to put anything between the IonRouterOutlet and the IonTabBar, then it’s not visible. If I try to remove the IonTabs and have the IonRouterOutlet outside, then the IonTabs are floating at the top of the screen. :frowning: