Tabs with a fixed Searchbar?

Hi everybody,

how is it possible to implement Tabs with a fixed Searchbar below the Tabs like in this screenshot?

The Toolbar (Tabs + Searchbar) are there, but no content for each Tab is shown. Here is my code:

    <ion-toolbar  color="primary">
    <super-tabs selectedTabIndex="0" toolbarBackground="primary" toolbarColor="light" indicatorColor="primary">
    <super-tab [root]="tab1Root" icon="menu"></super-tab>
    <super-tab [root]="tab2Root" icon="notifications"></super-tab>
    <super-tab [root]="tab3Root" icon="home"></super-tab>
    <super-tab [root]="tab4Root" icon="cart"></super-tab>
    <super-tab [root]="tab5Root" icon="text"></super-tab>
    <ion-searchbar placeholder="Search..."></ion-searchbar>

I have also tried ion-header, ion-content as a wrapper. It doesn’t work.

e.g. Facebook has it too, but the searchbar is above the tabs.

So it must be possible.

I would be glad about a simple solution.

Kind regrads,

maybe use this?


Is there no solution to implement that with an easy tag in the Tabs page directly?

If you’re not attached to those “super” tabs, I get the layout you describe for Facebook (searchbar above tabs) with this:

<ion-tabs tabsPlacement="top">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" [rootParams]="aboutParams" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>