I've added a side menu in my ionic 2 application that I'm developing, modifying the "super" template given by ionic. I've added the following code in app.html:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I swipe on the left the menu appears correctly, but the problem is that, in the header of pages, I can't see the three bars to open the menu:
From the documentation, it seems that simply adding this code to the html makes the three bars appear, but it isn't working for me. Do I have to change something in the header of all the pages? I don't know, maybe the super template itself overrides something in the header of pages, so that the bars are not showed?
You could try adding button and icon.
Like this:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
Related
I'm lost with an issue on IOS.
I'm implementing a chat, where you have a list of contacts and, when you click on one of it, it will display the list of the associated messages.
It works perfectly on android and on browser (even on IOS browser), but on IOS, when I click on a contact to display the messages, nothing happened.
My function is not called from the html, even when i tried to ad some testing buttons everywhere on my ion-content. It only works on my ion-header.
Could you please save my life ?
Here's my code :
HTML :
<ion-header>
<ion-toolbar>
<ion-buttons>
<button ion-button (click)="displayChat(undefined)">
Test (works here)
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="no-scroll" style="height: 100% !important;">
<div>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
<ion-list class="contactList">
<ion-item *ngFor="let chat of chats"
(click)="displayChat(chat)">
{{chat.contactName}}
<br>
<span class="chatDate">
{{chat.lastMessageSend}}
</span>
</ion-item>
</ion-list>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
<button ion-button (click)="displayChat(undefined)">
Test ?
</button>
</ion-toolbar>
</ion-footer>
TS :
displayChat(chat: Chat) {
console.log("Ok");
}
I reduced my code to be more readable.
Enjoy !
EDIT
.no-scroll .scroll-content {
overflow: hidden;
}
.chatDate {
float: right;
font-size: 0.7em;
}
It's not working in the footer either.
Ok, I figured out what the problem was.
Actually, this code was running into a Ionic Modal from a Popover.
I had to keep my Popover opened to handle some treatment with the OnDidDismiss method, but it could execute this method only if the popover is staying opened.
But, in IOS (of course), you cannot click on a modal if a Popover (or probably any another absolute element) is behind your modal.
So, to solve this issue, I created an Observable to handle the OnDidDismiss method (of the Modal), which I give as a parameter of the viewCtrl.dismiss method to get it back on the OnDidDismiss of the Popover view, and then subscribe the Observable.
Inside your button component, try adding ion-item instead of ion-button. I have a bit similar code where it is working fine.
Eg:
<button ion-item (click)="onClick()">Click me</button>
Let me know what happens after this! Will be ready to help.
I have implemented an ion-back-button into my toolbar in order to navigate back. But the button is not at its proper place and somehow displaced.
I even directly copied the code from the documentation but it still doesn't work.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I added a SIDEMENU in my project as second page, and the first page is a screen only one image with a button for the second. But when I click the button, instead of showing the sidemenu button in the upper left corner, it is showing only the "back" arrow, but if I put my SIDEMENU page as the rootpage, it works perfectly. I just want to go to the second page and my sidemenu appear perfect and not like the "back" button. Please, if anyone understands me, help me: D
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title> Vida carioca </ion-title>
</ion-navbar>
</ion-header>
it's this wrong
as i want
I am adding an ion-icon button to the ion-navbar in an Ionic 2 app.
It works correctly, but this solution seems rather verbose.
I would like to confirm that this is the correct/simplest-form/best-practice approach:
<ion-navbar>
<ion-title>Books</ion-title>
<ion-buttons end>
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
I would like to confirm that this is the
correct/simplest-form/best-practice approach.
It's perfect :)
It may seems like a little verbose, but each part of the code has its purpose. The <ion-buttons end>...</ion-buttons> will act as a container, to place the button in the right place.
In this case you're using end, and as you can see in this answer:
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.
<ion-buttons end> would be on the right for ios and the last button on
the right for android.
left/right are provide as a way to over ride that.
Then inside of that container, you just need to place the button, in this case, with an icon inside:
<button ion-button icon-only [navPush]="bookEditPage">
<ion-icon name="add" color="navigation"></ion-icon>
</button>
I'm trying add two icons in each sides of a ion-header where the title is in the center, but it always ends up with the two icons on the right side.
This is my code
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
</ion-buttons>
<ion-title>Title</ion-title>
<ion-buttons end>
<button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
which results in this header:
I can't figure it out, tried different kind of tutorials and trying to copy their example without any success. There's no styling behind it either, so nothing should mess up the layout. It feels like the "start" element is bugged in this version of Ionic or something. Could someone pinpoint me to the right direction?
This is my output when running "ionic info":
Your system information:
ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed
I used left instead of start
check this plunker
<ion-header>
<ion-navbar color="primary">
<ion-buttons left>
<button ion-button icon-only>
<ion-icon name="chatboxes"></ion-icon>
</button>
</ion-buttons>
<ion-title>Title</ion-title>
<ion-buttons right>
<button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
#varun aaruru answer is right. I just want to complement adding hideBackButton="true" to remove back button
<ion-header hideBackButton="true">
<ion-navbar>
<ion-title>trans-result</ion-title>
</ion-navbar>
</ion-header>
I wanted an ionic toolbar with multi-line headers and backward and forward arrows on either end:
After some experimentation, this worked:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button [routerLink] = "['/user-login']">
<ion-icon slot="icon-only" name="arrow-back-circle-sharp"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Yummy Pizzas</ion-title>
<ion-title size="small">Welcome, {{userName}}!</ion-title>
<ion-buttons slot="end">
<ion-button [routerLink] = "['/pizza-menu']">
<ion-icon slot="icon-only" name="arrow-forward-circle-sharp"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>