I have made a simple ion-navbar in the header. I have 3 buttons on it. When I am running it on the browser, it is working fine. But, if I test it on an emulator it looks like the 2nd image.
This is may header :
<ion-header>
<ion-navbar color="leo">
<button ion-button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ appName }}</ion-title>
<ion-buttons end >
<button ion-button (click)="goContactPage()" >
<ion-icon name="chatboxes"></ion-icon>
</button>
<button ion-button (click)="presentPopover($event)">
<ion-badge *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge>
</button>
<button ion-button (click)="goAbout()" >
<ion-icon name="calendar"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<button ion-button icon-only menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="icons" color="secondary">
<ion-segment-button (click)="goContactPage()">
<ion-icon name="chatboxes"></ion-icon>
</ion-segment-button>
<ion-segment-button (click)="goAbout()">
<ion-icon name="calendar"></ion-icon>
</ion-segment-button>
<ion-segment-button (click)="presentPopover($event)">
<ion-badge *ngFor="let n of nbr" color="danger" >{{n.total}}</ion-badge>
</ion-segment-button>
</ion-segment>
Related
I have created an application with ionic3 having a side menu.
<ion-menu [content]="content" type="overlay" id="user-menu">
<ion-header no-border>
<ion-toolbar>
<img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
</ion-toolbar>
<div class="user-info">
<ion-row>
<ion-col col-3>
<img src="assets/imgs/ic_avatar.png" class="user-image">
</ion-col>
<ion-col col-7>
<div class="padding-top-10">
<label class="user-name"><b>USER1</b></label><br>
<label class="user-designation">Manager</label>
</div>
</ion-col>
<ion-col col-2 text-center>
<img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward">
</ion-col>
</ion-row>
</div>
</ion-header>
<ion-content scroll="true" scrollbar-y="true">
<ion-list no-lines class="padding-top-10">
<button ion-item menuClose detail-none (tap)="openPageTab('ContactsPage')">
<img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('BroadcastPage')">
<img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('SettingsPage')">
<img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('KeyinfoPage')">
<img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('FaqPage')">
<img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
</button>
</ion-list>
</ion-content>
</ion-menu>
The issue here is menuClose is not working after multiple click on the side menu, means side menu is not closing even after touch on the menu.
Is there any solution for this?
Edit
Issues comes when using this.nav.push() there is no issues with this.nav.setRoot()
Thanks and Regards
Anand
try to use (click) instead of (tap) and let me know the feedback
<ion-list>
<ion-item-sliding #item>
<ion-item class="green">
<ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(item)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Problem: When I have multiple rows and I try to slide one, but it slides all rows along with it and instead of having the action button left to the slided row only, the button appears as one big button on the left of all rows.
You need to make multiple ion-item-sliding elements instead of multiple rows within one ion-item-sliding element.
<ion-list>
<ion-item-sliding *ngFor="let row of grid; let rowIndex=index"> <!-- for loop here -->
<ion-item class="green">
<ion-row class="row">
<ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
<button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options class="green" side="left">
<button ion-button color="danger" (click)="deleteItem(row)">Entfernen</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Ionic Form's top item goes behind ion-header. Below is the HTML.
<ion-header>
<ion-navbar hideBackButton color="dark">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>REGISTER</ion-title>
</ion-navbar>
</ion-header>
<ion-content class='has-header'>
<form [formGroup]="todo" (submit)="logForm()" padding class="bg-register-image">
<ion-list>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input [(ngModel)]="emaill" type="email" formControlName="emaill"></ion-input>{{emaill}}
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input [(ngModel)]="Password" type='password' formControlName="password"></ion-input>
</ion-item>
</ion-list>
<button ion-button block position="bottom" type="submit" item-left [disabled]="!todo.valid">Submit</button>
<button block ion-button color="secondary" [navPush]="homepage" item-left>CANCEL</button>
</form>
</ion-content>
Let me know what to change. Thanks in Advance.
How do we apply the default alignment classes provided by Ionic2? For example, I want a button to appear on the right side of a card.
<ion-card *ngFor="let table of tables">
<ion-card-content>
Card Text
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-card-content>
</ion-card>
Check Item placement section here
You can use ion-item to wrap and placement attribute.
for example:
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-item>
Card Text
<button item-right ion-button>//item right
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-item>
</ion-card-content>
</ion-card>
Or you can use Grid-row ,cols
<ion-card *ngFor="let table of tables">
<ion-card-content>
<ion-row>
<ion-row>
<ion-col width-80>
Card Text
</ion-col>
<ion-col>
<button ion-button>
<ion-icon name="add"></ion-icon> Add Item
</button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
I am trying to create 2 menus on a page in Ionic2
app.html
<ion-menu [content]="content" side="right" id="menu1">
<ion-content>
<ion-list>
<button ion-item menuClose="menu1" detail-none>
Close Menu 1
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" side="left" id="menu2">
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
hello-ionic.html:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>
<button ion-button color="secondary" menuToggle="left">Toggle Main Menu</button>
</p>
<p>
<button ion-button color="primary" menuToggle="right">Toggle Menu</button>
</p>
</ion-content>
The problem I am facing is that only menu2 is working, menu1 is not appearing. If I delete menu2 than menu1 is working.
Please help
I also have problems like you
And my solution is
file app.html edit like:
<ion-menu [content]="content" side="left" id="menu1">
This is menu 1
</ion-menu>
<ion-menu [content]="content" side="right" type="overlay" id="menu2">
This is menu 2
</ion-menu>
<ion-nav [root]="rootPage" [rootParams]="rootParams" #content swipeBackEnabled="false"></ion-nav>
file app.component.ts
add in constructor() {
...
this.menu.enable(true, 'menu1');
this.menu.enable(true, 'menu2');
}
USING:
PAGE.html
<ion-header>
<ion-navbar color="mytheme">
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>PAGENAME</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="star"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Wish you success :)))))))