Since v2 beta 10 ion-navbar does not show back button in ion-tabs page.
If there is a possibility to go back to another view from an ion-tabs base page, it should display the back button and not the menu button.
Steps to reproduce:
<ion-navbar>
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
Which Ionic Version? v2 beta 10
Run ionic info
from terminal/cmd prompt: (paste output below)
Your system information:
Cordova CLI: You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.2.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04 LTS
Node Version: v6.3.0
Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Just from looking at your code I think the issue is that your ion-navbar
is not wrapped in an ion-header
. In beta.10 we did a layout refactor that changed the way navbar worked slightly. Here is an example of the correct way to use a navbar now.
<ion-header>
<ion-navbar>
<button menuToggle="left">
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
I would also recommend checking out our changelog for all the details of the beta.10 release. Thanks for using Ionic!
I know about the changelog and did place the navbar in an ion-header. I'll provide a plunkr !
There you go : http://plnkr.co/edit/qpffipbbbCK4kjvy6yFX?p=preview
What to expect ?
I think it should pop for these two use cases not only for the second one... (it's what it was doing in beta 9)
As far as I see, the structure of your example is a bit unlucky.
Please try to set this.rootPage = TabsPage
in app.ts
Then I have no problem with the back button in your plunkr.
That's the thing @mpaland, the tabs page isn't necessarily always going to be the root of an application. I myself have this same issue. My root page is a list, and then when I click an item I push a tabs page onto the nav stack because each item has a LOT of content that needs to be displayed in different categories, which is why I use tabs. It's really the best for my situation. Ionic 2 should have support for non-root tab pages
Hello @zakton5 ! At this time we do not support tabs being anything other than the root page, although that could definitely change in the future. For your use case I would recommend checking out segments. Thanks for using Ionic!
Thank you @zakton5 @jgw96 @mpaland for your answers.
I have the same structure as zakton, my root page is a list of things, and when I click on this thing, I have many informations to display in categories so it definitely cannot be my root page and using segments is a bit tricky and we will need a lot of refactoring :disappointed:
The problem I see is how do you leave (navigate backward) from a tabs page? A back button might be a bit confusing, likewise using the hardware back button.
I would consider using a segment control on sub pages as @jgw96 already pointed out.
Well... I think that when there is no more backward history for a tab page, it should go to what was there before tabs. Does that make sense ?
We will try out segments to see how we can work with it, thanks ! :wink:
Hello all! I am going to be closing this issue as we only plan on supporting tabs as the root page at this time and using segments should fix the issue here. @fdelayen If you have any issues using segments feel free to hit up our forum. Thanks for using Ionic!
Just an update on the fly...
Segments or really not designed for this use case and if emulate tabs with segments is a good idea technically, the visual design doesn't fit at all (try with icons in, it's... just ugly).
I will either patch the navbar or apply tabs theme on segments... no choice. :disappointed:
I must agree with @fdelayen. They just do not look good like tabs do. Beyond that, having to combine the HTML from each of the old tab pages into the template for the segments makes it much less manageable.
If anynone's interested in having the back button and using tabs here's a simple css hack:
//tab1.html (root page)
<ion-navbar class="force-back-button">
//css
.force-back-button .back-button {
display: inline-block;
}
Would be nice to have hideBackButton="false"
directive working on nav-bar (docs) .
Yep, that will make the back button visible. But in the current release of Ionic2 pressing it will display a black page and not the page that was used to push in the new page with the tabs in. And you are still stuck at the tabs page.
Come to think of it, the reason why I get a black page might be because I push the page with the tabs from a side menu that is initialized on the App and not from a page so the nav control that the menu gets is possibly not the current pages nav...
I just saw @jgw96 closing comment to try using segments instead, but I did find a solution building on @mordka answer.
I found this StackOverflow answer about overriding the back button click http://stackoverflow.com/questions/38906715/ionic-2-generated-back-button-click-event
So by using css to force the back button to be displayed you can override the back button click event and dismiss the parent (Tabs) view controller using:
this.nav.parent.viewCtrl.dismiss();
In your TabPage.ts
import {OnInit, ViewChild} from '@angular/core';
import {NavController, Navbar} from 'ionic-angular';
export class TabPage implements OnInit {
@ViewChild(Navbar) navBar:Navbar;
constructor(public nav:NavController) {
}
ngOnInit() {
}
ionViewDidLoad() {
this.navBar.backButtonClick = (e:UIEvent) => {
console.log("Back button clicked");
this.nav.parent.viewCtrl.dismiss();
};
}
}
@mjwheatley Works perfectly!! Thank you!
@mordka you too! thank you!
great !
This is obviously something that many people have run into. I would suggest reconsidering support for 'non-root' tab pages.
@mjwheatley I have a small addition to anyone who might have the same problem as I did:
In Ionic 3.10 default tabs template doesn't have navbar component and it makes navBar
undefined
. So code from TabPage.ts have to go to child components.
E.g. my home.ts looks like this:
import { Component, ViewChild } from '@angular/core';
import { NavController, Navbar } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild(Navbar) navBar: Navbar;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
this.navBar.backButtonClick = (e: UIEvent) => {
console.log("Back button clicked");
this.navCtrl.parent.viewCtrl.dismiss();
};
}
}
Thanks to all who provided this solution. Works like a charm! I disagree with others who don't see this configuration as useful. A list of buttons that each takes you to a tabs-based detail page for the corresponding entity is very intuitive for what we are trying to do. Having a back-button on the tabs-based detail page to return to the list makes perfect sense to our users. Furthermore, tabs-based navigation on the detail pages is highly preferable to segments, so thanks again to those who provided the workaround!
I am getting "Property backButtonClick does not exists on type Navbar" error.
Can Anyone help me with this.
Thanks @eolant! 馃挭
Good Afternoon guys,
I tried to do it the same way as @eolant, but it is giving error "the navigation stack needs a root page"
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Most helpful comment
I just saw @jgw96 closing comment to try using segments instead, but I did find a solution building on @mordka answer.
I found this StackOverflow answer about overriding the back button click http://stackoverflow.com/questions/38906715/ionic-2-generated-back-button-click-event
So by using css to force the back button to be displayed you can override the back button click event and dismiss the parent (Tabs) view controller using:
this.nav.parent.viewCtrl.dismiss();
In your TabPage.ts