I would like to change the ion-icon used in my navbar's back button, which appears when a page has been pushed onto the nav stack. Here is my code:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon [name]="navbarIcon"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
The "name" directive affects the appearance of the menu toggle button, but it has no effect on the back button. Is there a way to modify my code so I can change the icon displayed in the back button?
I looked at this question, but it is for Ionic 1 and I also think there should be a better way.
I was able to do this by hiding the default back button and adding a custom one.
In the Page where I need the custom back button, just set the header as below
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Details</ion-title>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Stackblitz link with working demo: https://stackblitz.com/edit/ionic-jihfrp
Related
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
When i open my app, the 1st page which appears is Login.html , after filling the form, it navigates to dashboard.html
Problem: When it goes to Dashboard.html , it does not shows menuToggle ion-button. Please help me resolve this issue
This is the code i am using for navigation in login.ts:
if(data[0].USR==1)
{
this.navCtrl.push(DashboardPage);
}
my code in dashboard.html
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Please help me resolve this issue
Please note:
When i normally navigate from menu to dashboard page, it shows the menu toggle button.
Would you like to try following html code for your menuToggle?
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>dashboard..</ion-title>
</ion-navbar>
</ion-header>
Also note, if there isn't any back possibility from this dashboard view to your login view, I guess you would rather like to set it as root instead of pushing it. Therefore I would suggest to modify:
this.navCtrl.push(DashboardPage);
into
this.navCtrl.setRoot(DashboardPage);
I'm having a big issue with aligning an icon to the left. No matter what I do, it aligns to the right side of the screen. Other pages do not have problem and aligns perfectly to the left. This issue happens when I use a tab.
How do I fix this? There's no CSS code as I'm using the default codes.
This is my ionic code:
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-segment end [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
No matter what I do, this is the end result:
PS: I'm using the latest version of ionic.
Just like #Sam5487 said, you should use an ion-navbar instead of the ion-toolbar (if you're using the toolbar in order to avoid the back arrow icon when pushing the page, you should set that page as root instead of just pushing it to the nav stack).
About end/start/left/right
I've also seen that you've used the start attribute in the ion-buttons, but it doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that.
Using the menuToggle button
That being said, if you take a look at the menuToggle docs:
If placing the menuToggle in a navbar or toolbar, it should be placed
as a child of the <ion-navbar> or <ion-toolbar>, and not in the
<ion-buttons>.
So in order to achieve the desired result, you just need to change your layout for this one:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-navbar>
</ion-header>
You can also confirm that this is the recommended way to do it, by taking a look at this page from the Conference App demo made by the guys at Ionic
Try this instead
<ion-header>
<ion-navbar>
//*** Rest of the header code ***//
</ion-navbar>
</ion-header>
Also in your button that is only an icon i suggest adding icon-only as well.
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
I am working on an ionic project that has several pages out of which some pages have the back arrow that takes to the previous page however this does not seems to work fine on the rest of pages. I believe that the back arrow is default as i have implemented same header code for both the pages but one of them has the back arrow displayed but another does not has.
Page 1 header code // This has the back arrow
<ion-header>
<ion-navbar color="primary" primary>
<ion-title>Product Detail</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Page 2 // No back arrow displayed
<ion-header>
<ion-navbar color="primary" primary>
<ion-title>Shop Single</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="cart()">
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Also the .ts files for the same too do not seem to have much difference.
I have an Ionic 2 app in which a user can go from home -> 'topic view' (which contains a back button to home and a side menu like so:)
<ion-menu id="itemHierarchy-{{_pageId}}" side="right" persistent="true" [content]="content">
//toolbar stuff
</ion-menu>
<ion-header>
<ion-navbar>
<button ion-button right menuToggle="itemHierarchy-{{_pageId}}">
<ion-icon name="list"></ion-icon>
</button>
<ion-title>name</ion-title>
</ion-navbar>
</ion-header>
<ion-content #topicView padding>
</ion-content>
I have a link in the 'topic-view' page which navigates to another 'topic-view' page (pushes it onto the stack via deeplinker), and in it the new side menu doesn't open. I presume this is because there are two 'topicView' 'ion-content' nodes in the stack, but these cant be assigned a dynamic ID so not sure how to fix it... anyone?