I'm developing an ionic app on android. I'm facing a problem where back button doesn't show up when there's no page to go back.
For more detailed explanation:
Scenario 1: Button from side menu when click go to View B.
Scenario 2: Button from side menu to View A, then button from View A to View B.
Scenario 2 View B shows back button, since it has a previous page, but Scenario 1 doesn't have a previous page that's why it doesn't show the back button, How do I display the menu button if there's no back button?
Here's my code below:
<ion-view view-title="MY View">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button" type="submit"
ng-click="goEdit(data.ID)">Edit</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header">
</ion-content>
</ion-view>
Additional Info:
When removing the <ion-nav-bar> it displays the menu button, but of course will no longer show back button and edit button. When I try putting ng-hide in <ion-nav-bar ng-hide="isMenu"> it doesn't show any nav-bar since it's hidden but from html inspect element it's still there but hidden only. Any work around on this?
If you set a page as a rootPage and also use menu in you will see menu button. when navigating to another page from root if you use navCtrl.push() back button will automatically be added to the pushed view.if you set second page as a rootPage again you will see menu button again.
But if you want to implement it yourself that is another thing.
also check this link
Consider customizing the navbar/toolbar only for the pages that needs it.
By having an ion-toolbar in the ion-header, it appears on top of the default ion-navbar. So it is a workaround to have a custom header bar with my close icon and my custom function gotoHome(). That's the best way i found to customize the 'navbar' for a particular page.
<ion-header>
<ion-toolbar>
<ion-buttons left>
<button ion-button icon-only (click)="gotoHome()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
...
</ion-content>
The same answer applies to this topic, for reference :
Ionic Change back button icon for one page only
Related
I got two menu on the header menu. A left side "Burger Menu" and a right side menu with "add" symbol. The html content for the two menu are included in a seperate side-menu.html [not on app.html]
id for the left menu is "menuLeft" and the id for right menu as "menuRight"
The Burger menu appears on the main page and upon proceeding to a child menu , its replaced with a BACK button. This is expected and I am happy with that.
The Right menu is not enabled in any of the pages. I included the below code on only one of the child menu html file where the right menu needs to be appear.
<ion-navbar>
<ion-title>{{name}}</ion-title>
<button ion-button end>
<ion-icon name="add"></ion-icon>
</button>
</ion-navbar>
In its corresponding *.ts file I enabled the right menu in the ionViewWillEnter
ionViewWillEnter() {
this.menu.enable(true, 'menuRight');
}
Now, I have two issues.
1. When I include menuToggle in the button tag, the menu disappears. But I want the menu to appear and I should have the menu Toggle feature
I am able to make the right menu appear only when menuToggle attribute not mentioned.And still, it is not appearing on the right end of the header, it appears just prior to the Title. Refer screenshot attached.
Not sure why I am getting the background for the "add" button. Can I make it transparent?
Kindly let me know if you need more info. Thanks in advance
Change your navbar to make the menu appears on the right side, and i need more information about to awnser the other questions. Where are you placing the menuToggle ?
<ion-navbar>
<ion-title>{{name}}</ion-title>
<ion-buttons right>
<button ion-button>
<ion-icon name="add"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I try to make a little app in ionic2 to learn about it but I have a problem with navigation.
In fact I have well understand the difference between a rootpage (change whit nav.setRoot) and a "normal" page (add with nav.push). The thing is for my app I'll need to be able to open a side menu (this is ok if I'm on a rootpage but not it's not ok with the second type of page) and to be able to go back (this is ok with a push page but not with a rootpage).
So for me this type of page should be push and not a root page but how repear side menu on this type of page?
Thank you.
EDIT:
What about using persistent="true" in your ion-menu item? Like you can see in Ionic2 docs:
Persistent Menus Persistent menus display the MenuToggle button in the
NavBar on all pages in the navigation stack. To make a menu persistent
set persistent to true on the element. Note that this will
only affect the MenuToggle button in the NavBar attached to the Menu
with persistent set to true, any other MenuToggle buttons will not be
affected.
So your app.html woul be:
<ion-menu [content]="content" persistent="true">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button menuClose ion-item (click)="logout()">Logout</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
I am new to Ionic and i would like to remove the back button and only display the menu button on all my pages. Where can i do this?
You need to add attribute persistent="true" to ion-menu
Like that.
<ion-menu side="left" [content]="content" persistent="true"></ion-menu>
then menuToggle button will be available on all views.
You can find more details here in the docs.
For hiding back button you can try this code:
<ion-header>
<ion-navbar hideBackButton >
<ion-title>PageTitle</ion-title>
</ion-navbar>
</ion-header>
I tested in my project. It works fine.
Using the Ionic tabs and nav demo I have been building a simple app.
Here is codepen of example I have been using as a template to follow:
http://codepen.io/ionic/pen/odqCz
In my app I want to add info button to the nav bar, this can be 'secondary' (right) to not interfere with the back button that appears on the left when navigating through the stack.
Here is the /template for one of the tabbed pages that I have added an info button:
<ion-view view-title="Gallery">
</button>
</ion-nav-buttons>
<ion-content class="padding">
<h3>Digit2Widgets Gallery Showcase.</h3>
<p>
<a class="button button-block button-light" href="#/tab/Demo1">Gallery Demo 1</a>
<a class="button button-block button-light" href="#/tab/galleryDemo2">Gallery Demo 2</a>
</p>
</ion-content>
</ion-view>
Now the gallery demo button bellow works and navigates to demo1 but the button at the top added to nav bar does not, even though they are structured in the same fashion? How can I fix this?
is there an easier way to add a permanent info button to the right of the nav bar?
Any help greatly appreciated.
Fred
I have actually got the answer now:
When adding buttons to Nav You should use ui-sref to navigate by passing the state name:
<button class="button button-icon icon ion-ios-information-outline" ui-sref="tab.Demo1">
:)