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
Related
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>
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 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
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 am building an Ionic 2 application with side-menu and want to customize my side menu as can be seen in the following image (not exact same, however the important part is how to get that first block with such a picture and some text), with custom color for the entire toolbar etc?:
My application looks like following:
My app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can do it just adding some standard HTML code, and with CSS you can customize the style. Create the CSS Class rules in the .scss file. Rember to import
#import "build/app.html"; in the app.core.scss file. You'll find other information to personalize your app there
And for display the first block part you can add your code before the ion-list of the menu and after the tag <ion-content>.
You can delete this part, so it's more easy to create your custom layout.
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
The code will be:
<ion-menu [content]="content">
<ion-content>
<!--Here you can add all the code
you want, so you can display whatever you want-->
<!--Menu list-->
<ion-list class="menuList">
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="menuButton">
<ion-icon name="{{p.name}}"></ion-icon>
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
If you need some more help, don't hesitate to ask.