My ionic side menu is working in android mobile but in ios i am not getting.
here is the code for .html
<button ion-button menuToggle icon-only class="menuButton">
<ion-icon name="menu"></ion-icon>
</button>
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>some menu content, could be list items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent ></ion-nav>
i dont understand where is my issue is if you need anything please let me know
my side menu is working in android and browser except ios
Try adding type="overlay" to the sidemenu:
<ion-menu [content]="mycontent" type="overlay">
use click function instead of menuToggle
<button ion-button icon-only start (click)="openSideMenu()">
<ion-icon name="md-menu"></ion-icon>
</button>
open menu using
openSideMenu() {
this.menuCtrl.enable(true)
this.menuCtrl.toggle();
}
disable menu before you push to new page
this.menuCtrl.enable(false)
Related
I'm very new in Ionic2 or Ionic at all. I set up a new project and want to design a small menu at the bottom of the foot of my page. I didn't do anything else on this project and trying to imitate the steps of a tutorial video. but when I use the icon-only directive on a button the background of the button only becomes a bit smaller. The background doesn't disappear.
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
Here's my code. I hope you can help me.
For Ionic 4 - <ion-button fill="clear">
You can use the fill property now, e.g:
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
Adding a clear attribute should give the result you want if i understand correctly:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only clear>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only clear>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
For Ionic 4:
...
<ion-button (click)="onClick()">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
...
You can go to this link for more references https://ionicframework.com/docs/api/button
ionic 4 :
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
I am a beginner in Ionic, trying to display a side menu page when users clicks on a button. Instead, what I'm still getting is the back button. Here's my code:
//menu .html
<ion-header>
<ion-navbar>
<ion-title>menu</ion-title>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
//app.html
<ion-menu [content]="content">
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
What am I doing wrong?
Intro
Ok so, ionic's navigation works like a stack. You push a component on the stack, pop it off or create a new stack.
To push a component on the stack you'll need to call (if you call your NavController navCtrl) navCtrl.push(someComponent);
To pop a component, call navCtrl.pop(someComponent);
To create a new stack, call navCtrl.setRoot(someComponent);
Why is this important?
If you want the menu-icon to show, the page has to be at the lowest level of the stack, this is in ionic called the root.
When a page is not root, the menu-icon will magically transform into a back-button, so you can go back to your root page. (f.e. when you want to see more details about an item)
Sure, not really reading anymore, but what do I need to do?
Well, first of all, just include the <ion-header> on your page, since you want to show the icon on your page. In your code, you're trying to get a menu-icon in your ion-menu (which is your sidemenu).
So you will have something like the following, create your menu in app.component.html
app.component.html
<ion-menu type="overlay" [content]="content">
<ion-content>
<button menuClose icon-only>
<ion-icon name="close"></ion-icon>
</button>
<button menuClose>
My Custom button WHOOOOO
</button>
</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>
page1.html
<ion-header>
<ion-navbar>
<ion-title>Page 1 FTW</ion-title>
<ion-buttons start>
// So this icon will change depending on the page's place in the ionic Stack
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button menuToggle>Open my great menu!</button>
</ion-content>
Now in your app.component.ts you want to make Page1 the root, this way you'll see your menu icon in the header.
This can easily be done by changing the rootPage property of AppComponent.
Simply import { Page1 } from 'your/page1/location' and call (in constructor f.e. this.rootPage = Page1;;
Now Page1 will have a menu-icon in it's header which will show your menu!
If you want to include a button which opens your menu, just add the menuToggle property to it.
Your tags seems to be in a wrong order. Can you try with code bellow?
<ion-menu>
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
my Ionic 2 app has a problem when I show a modal on my home page: when the user closes the modal and get back to the home page, the menu button is not there. That only happens when that modal is shown. Not sure if I'm doing something wrong with the navController. Anyone faced this problem? The header of my page is like this:
<ion-header>
<ion-navbar>
<ion-buttons left class="menu-button">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>
<div class="text-header">Home Page</div>
</ion-title>
</ion-navbar>
</ion-header>
I call the modal like this:
const modal = this.modalCtrl.create(SetMotivoIntervalo, {chamada_id: this.chamada_id});
modal.present();
And for closing modal:
onCloseModal(){
this.viewCtrl.dismiss();
}
Try adding enable-menu-with-back-views="true" property to ion-side-menus
<ion-side-menus enable-menu-with-back-views="true">
</ion-side-menus>
I would like to create tabs like these on a page:
As you see Voortgang and pijnniveau are my tabs in the page itself but if I set them like this:
export class ProgressPage {
tab1Root = HomePage;
tab2Root = SchemaPage;
and than in my html template do this:
<ion-header>
<ion-navbar color="light">
<ion-title>{{viewTitle}}</ion-title>
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today()">Today</button>
<button ion-button (click)="changeMode('month')">M</button>
<button ion-button (click)="changeMode('week')">W</button>
<!--<button ion-button (click)="changeMode('day')">D</button>-->
<button ion-button (click)="loadEvents()">Load Events</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<!--<template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel"></template>-->
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
</calendar>
<ion-list inset>
<ion-list-header>{{ viewTitle }}</ion-list-header>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
<ion-item>
<h3>Frans van Brugge <span class="date">9 juni 2017</span></h3>
<p>Fysiotherapie afsrpaak</p>
</ion-item>
</ion-list>
</ion-content>
<ion-tabs color="light" tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Missies"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Beloningen"></ion-tab>
</ion-tabs>
But this will looks like this, you see the tabRoot pages under the active page:
How can I fix this?
Kindly go to your app.componet.ts file and set the rootPage to ProgressPage. (If this is the opening screen of your app)
If you are using a login screen or if you are navigating from another screen to this screen, then ensure that you are pushing the ProgressPage in the navCtrl.
Hope this helps you. Thanks.
In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, many times the click event gets fired and the contact detail page gets displayed.
<ion-content class="contacts-page-content">
<ion-list>
<button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
<ion-avatar item-left>
<img[src]="contact.picture">
</ion-avatar>
<h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
<h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
<h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
</button>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more contacts...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.
Thanks.
Check here for ionic 2 gestures.
Try
(tap)=showContactDetails(contact)
instead of click.