Tabs with a fixed Searchbar?

Ionic Framework ionic-v3
1

Hi everybody,

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

Fixed Searchbar
Fixed Searchbar.png393×679 5.41 KB

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>
    </super-tabs>
    <ion-searchbar placeholder="Search..."></ion-searchbar>
    </ion-toolbar>

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,
Thomas

2

maybe use this?

<ion-searchbar
  [(ngModel)]="myInput"
  [showCancelButton]="shouldShowCancel"
  (ionInput)="onInput($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>
3

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

4

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

<ion-content>
<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>
</ion-tabs>
<ion-searchbar></ion-searchbar>
</ion-content>