I'm trying to show a back button in the toolbar of one page.
Below is excerpt of my code.
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button [text]="" [icon]="arrow-back"> </ion-back-button>
</ion-buttons>
<ion-title>
About
</ion-title>
</ion-toolbar>
If I set the defaultHref attribute, it works but I will not have ability to use my custom back button with text and icon.
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="home"> </ion-back-button>
</ion-buttons>
<ion-title>
About
</ion-title>
</ion-toolbar>
How do I make it work. Could anyone please help?
If you are trying to use a custom header (like me), this is the workaround that I found pretty easy to implement and works like it's supposed to.
/components/custom-header.html
<ion-toolbar>
<ion-buttons slot="start">
<ng-content></ng-content>
</ion-buttons>
<ion-title>Page title</ion-title>
</ion-toolbar>
And the usage will be like:
/pages/home-page.html
<ion-header>
<custom-header>
<ion-back-button></ion-back-button>
</custom-header>
</ion-header>
This is working in my project ..
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button text=""></ion-back-button>
</ion-buttons>
<ion-title>About</ion-title>
</ion-toolbar>
</ion-header>
There is an open issue on the github page about the fact that ion-back-button won't display in non ion-header containers such as custom components. However, you can work around this with css.
.can-go-back ion-back-button {
display: block;
}
GitHub issue open since 2019: https://github.com/ionic-team/ionic-framework/issues/17039
I had the same problem as yours, I have managed to remove the <ion-back-button> and made a custom button like this:
<ion-toolbar>
<ion-buttons slot="start">
<ion-item lines="none" routerLink="/home">
<ion-img src='path-to-your.png'></ion-img>
</ion-item>
<ion-text>About</ion-text>
</ion-buttons>
</ion-toolbar>
Then adjust the style. A little bit of work but it's worth it.
i find it works cleaner this way..by using the same ion-button but with an icon inside..its cleaner this way and works just normal..all you need to do is change the route to the previous route
<ion-buttons slot="start">
<ion-buttons slot="start" routerLink="/payment">
<ion-icon name="chevron-back-outline" class="xdsffdd"></ion-icon>
</ion-buttons>
</ion-buttons>
Related
I've made a custom toolbar component:
<ion-toolbar>
<ion-title color="black" size="small"><strong>Account Information</strong></ion-title>
<ion-buttons slot="start">
<ion-back-button (click)="return()" color="green" defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-content></ion-content>
</ion-toolbar>
If I reuse this toolbar in different places in my app, can i customize the content of it somehow?
for example, how can I add a save button to it in a page where i use the
toolbar component?:
<ion-header class="ion-no-border">
<app-toolbar>
<ion-buttons slot="primary">
<ion-button (click)="save()" color="green">
Save
</ion-button>
</ion-buttons>
</app-toolbar>
</ion-header>
<ion-content>
<ion-grid>
...
In this example the save button doesn't show up
i started a project with tab template which i then later decided to add a side menu. the trouble is the side menu does not appear at all. here is my app.components.html looks like
<ion-app>
<ion-split-pane>
<ion-menu side="start">
<ion-header translucent>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content><ion-list><ion-item>he vik</ion-item></ion-list></ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-split-pane>
</ion-app>
actually after doing above my actual page comes for a brief second and shows a white page due to this.
in the console i see an error
sz7tok82.entry.js:5 Menu: must have a "content" element to listen for drag events on.
but i already have content element.
Sirius2013 is correct, you will need to use the contentId attribute.
See a working example below:
App.component.html
<ion-app>
<ion-menu contentId="content1" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
menu stuff
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main></ion-router-outlet>
</ion-app>
AnyPage.html
In the page you want to show your side menu, you can use the ion-menu-button tag.
See this example:
<ion-header>
<ion-toolbar>
<ion-title>Page Title</ion-title>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
Set the autoHide tag to false, so you will always see the menu button.
Docs:
https://beta.ionicframework.com/docs/api/menu-button
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
https://beta.ionicframework.com/docs/api/menu
Try to use contentId attribute.
I am trying to have a ion-header where one icon is on left and another on right. my code looks like below
<ion-header>
<ion-navbar>
<ion-buttons icon-start>
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>about</ion-title>
<ion-buttons icon-end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
but what is hapenning is that i see it coming in 3 different rows.
ok, you need remove the first <ion-buttons> and leave only <button> and on the second tag of <ion-buttons> change icon-end to end.
and it should work!!
Welcome to StackOverflow!
Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.
About end/start/left/right
Using the start attribute in the ion-buttons 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. It's easier to see with a few examples, so please take a look at the following examples.
Example 1: Using start and end
<ion-header>
<ion-navbar>
<ion-buttons start> <!-- Here we use start -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons end> <!-- Here we use end -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
Example 2: Using left and right
<ion-header>
<ion-navbar>
<ion-buttons left> <!-- Here we use left -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right> <!-- Here we use right -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
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.