I’m using a sidenav for my app but i have a view where i’d like to display tabs as nested navigation. Similar to the attached screenshot of WhatsApp. But whatever which markup i try, it doesnt work. I could overwrite css like in the blue screenshot but i really dont want to be forced to do that.
<ion-header>
<ion-navbar primary>
<ion-title>I'm not root View</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-tabs tabbarPlacement="top" primary>
<ion-tab tabIcon="card" tabTitle="Questions" [root]="tab1"></ion-tab>
<ion-tab tabIcon="stats" tabTitle="Statistics" [root]="tab2"></ion-tab>
<ion-tab tabIcon="settings" tabTitle="Settings" [root]="tab3"></ion-tab>
</ion-tabs>
</ion-content>
The code above will just push the tabs under the navbar… any hints?
How it should look like:
2 Likes
You wouldn’t put the tabs inside the ion-content.
This is indeed working better but still not perfect since i loose the opportunity to have my content hierarchically correct. Since the navbar should be in the “root-component” in order to keep the back arrow and not multiply the navbar for every tab view (which works).
I’d expect the following to work:
“root-component”
<ion-header>
<ion-navbar primary>
<ion-title>I'm not root View</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs tabbarPlacement="top" primary>
<ion-tab tabIcon="card" tabTitle="Questions" [root]="tab1" [(rootParams)]="cardSetId"></ion-tab>
<ion-tab tabIcon="stats" tabTitle="Statistics" [root]="tab2" [rootParams]="cardSetId"></ion-tab>
<ion-tab tabIcon="settings" tabTitle="Settings" [root]="tab3" [rootParams]="cardSetId"></ion-tab>
</ion-tabs>
tab:
<ion-content>
...
</ion-content>
But instead the tabs will slide under the navigation. (beta 10)
Only working solution would be to have the redundant navbar in every of the 3 tabs and implement the “back” button myself. this is no good.
See official example in MD-Spec:
CanKattw:
I’d expect the following to work:
“root-component”
<ion-header>
tab:
<ion-content>
But instead the tabs will slide under the navigation. (beta 10)
For what it’s worth, that used to work for me in beta 9. Now that i’ve upgraded to beta 10 i’m seeing the same behavior of the tab content sliding up under the navigation. I’m currently investigating CSS fixes and trying to implement the navbar in each of the tabs but so far I haven’t gotten anything that works well with the iOS or MD themes.
For now you could give the ion-tabs a extra class and set styles like this:
.platform-ios {
ion-tabs.withNavbar {
margin-top: 44px;
}
}
.platform-android {
ion-tabs.withNavbar {
margin-top: 50px;
}
}
HTML:
<ion-header>
<ion-navbar primary>
<ion-title>BlahBlahBlah</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs tabbarPlacement="top" primary class="withNavbar">
...
</ion-tabs>
2 Likes
Thanks for the tip, I tried a variety of things like that, but it doesn’t work in my case. One the tab items contains a list that a user can drill into for more details on an item, and that detail page contains another set of tabs. So I either end up with stacked ion-headers or ion-headers hidden behind other ion-headers and not displaying in the correct order.
This is still not setup correctly.
Please take a look at the tabs starter project we provide.
ionic start myApp tabs --v2
This should get you going in the right direction.
2 Likes
Thanks for not reading the topic. We are clearly referencing to tab use inside of a existing view (<- which is not a tab) … In order to have e.h. a shared toolbar, see the given MD Spec example. Genre is the tab “host” with a toolbar that’s present on all tabs (pop, alternative, rock…)
I’m not sure if it is possible to do so with currently ionic tab directive.
1 Like
Hi , any updates on this!!.. I am currently using the final version ionic 2.0.0
This is how I did it. It is based on material design and also have the sliding tab border effect.
Your css
ion-header::after {
background-image: none !important;
border-bottom: #bbb solid 0.05rem;
}
.tab-wrap {
width: 100%;
position: relative;
display: flex;
top: 4px;
box-shadow: -1px 1px 3px 0px #bbb;
}
input[type="radio"][name="tabs"] {
position: absolute;
z-index: -1;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-label {
color: #00B9DF;
border-left: #ddd solid 1px;
border-right: #ddd solid 1px;
font-weight: 500;
}
input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
display: block;
}
input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
left: calc((100% / 2) * 0);
}
input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
left: calc((100% / 2) * 1);
}
input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
left: 0;
}
.tab-label {
cursor: pointer;
color: #111;
background-color: #fff;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
height: 56px;
transition: color 0.2s ease;
width: 100%;
}
.slide {
background: #00B9DF;
width: calc(100% / 2);
height: 4px;
position: absolute;
left: 0;
top: calc(100% - 2px);
transition: left 0.3s ease-out;
}
.tab-label-content {
width: 100%;
}
.tab-label-content .tab-content {
position: absolute;
top: 100px;
left: 16px;
line-height: 130%;
display: none;
}
Your page:
<!--
Generated template for the BookingsPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar color="t_white">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Bookings</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="tab-wrap">
<input type="radio" name="tabs" id="tab1" checked>
<div class="tab-label-content" id="tab1-content">
<label class="tab-label" for="tab1">Upcoming</label>
<div class="tab-content">
</div>
</div>
<input type="radio" name="tabs" id="tab2">
<div class="tab-label-content" id="tab2-content">
<label class="tab-label" for="tab2">History</label>
<div class="tab-content">
</div>
</div>
<div class="slide"></div>
</div>
</ion-content>
1 Like
Does anyone know how to do this in ionic-3? I tried the following code but I don’t see any tabs in the page at all. I need exactly the same screen as mentioned in the question.
<ion-header>
<ion-navbar primary>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Shopping</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="ios-cart-outline"></ion-icon>
</button>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-tabs tabbarPlacement="top">
<ion-tab tabTitle="Trending" [root]="trending"></ion-tab>
<ion-tab tabTitle="Catalogue" [root]="catalogue"></ion-tab>
</ion-tabs>
<ion-content>
</ion-content>
I wrote the below code but the tabs aren’t visible!
<ion-header>
<ion-navbar color="navbar-bg-color">
<ion-title>Shopping</ion-title>
<ion-buttons end>
<button ion-button icon-only color="royal">
<ion-icon name="ios-cart-outline"></ion-icon>
</button>
<button ion-button icon-only color="royal">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-navbar color="navbar-bg-color">
<ion-tabs tabsPlacement="top">
<ion-tab tabTitle="Trending" [root]="trending"></ion-tab>
<ion-tab tabTitle="Catalogue" [root]="catalogue"></ion-tab>
</ion-tabs>
</ion-navbar>
</ion-header>
Here goes the screenshot
Even putting the ionic tabs outside the ion-navbar didn’t worked either. any help?
playvue
September 7, 2017, 10:10pm
15
This is correct. Wrapping your in works perfectly such that:
<ion-header>
<ion-navbar></ion-navbar>
</ion-header>
<ion-content>
<ion-tabs tabPlacement="bottom">
...
</ion-tabs>
</ion-content>
Okay! I got what I need with the help of super tabs library. < https://github.com/zyra/ionic2-super-tabs/tree/v4.1.0 > This should help if anyone wants to make this happen.
1 Like
hi i wanna tab for my Home page only so shall i hide…If i give it in root page then it ll show every page so pls provide some example.
Thanks
When i navigate from tab to page the main page heading is visible how to get rid of it
1 Like
Hi if you work with tabs, go to the app.module and insert in IonicModule.forRoot(MyApp, {tabsPlacement: ‘top’} ) instead of IonicModule.forRoot(MyApp)
1 Like
thank you, that really helped me!!! (ionic v3)
1 Like
