I importet an example app (menu) and added a button with icon & text to the menu:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
Sadly, this results in a not fully shown Icon (I test my app in Chrome)
you have to use the attribute item-left at ion-icon
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon item-left name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
Related
with ion-split-page added, I am not able to see my side menu options which are displaying properly in mobile view.
`
<ion-app>
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu side="start" menuId="m1" contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Wanderlust</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/places/tabs/discover">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>Discover Places</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/bookings">
<ion-icon name="checkbox-outline" slot="start"></ion-icon>
<ion-label>Your Bookings</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" (click)="onLogout()" button>
<ion-icon name="exit" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
</ion-app>
`
Does anyone know how to solve this issue?
We need to add autoHide="false" attribute on ion-menu-toggle.
<ion-menu-toggle autoHide="false">
i am building a project with ionic 3, and the first 3 pages use the blank ionic template, because it has to do with login, registration and then verification, and afterwards you enter the applications home page, which then i utilized the sidemenu ionic template
i have succeeded in building the application and everything works, but after adding the sidemenu templates it affects the blank templates, if you slide left on the screen the side menu shows..
this is my code..
on the app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
on the verify account view template i have this
<ion-header>
<ion-navbar color="">
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
i removed the menutoggle button but if you slide on those pages, this is what i did
<ion-navbar>
<!------------i removed this section ----------------->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<!------------i removed this section ----------------->
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
but yet to no avail, please is there something i was supposed to do, or is not doing? thanks in advance.
You can enable/disable the sidemenu from your controller like below
<ion-menu [content]="content" id="mymenu">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
And then in your controller, import MenuController
import { MenuController } from 'ionic-angular';
public menuController:MenuController
menuController.enable(true,"mymenu"); //For Enabling
menuController.enable(false,"mymenu"); //For Disabling
I trying add side menu in my Ionic Project. I could do add this code, but i need which have information of my users.
This is complicated beceause the side menu initialize in app.component.html, that it to say, in the start of app, and the information get after of login.
App.component.html
<ion-menu id='menu' [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item>
Preparaciones
</button>
<button ion-item>
Revisiones
</button>
<button ion-item (click)='openCuenta()'>
Cuenta
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>`
I think if i would create a component with this code. How would add this component in the start of app after the add the information of user?
You can use a Provider to provide your user information. For example, if you have an UserProvider with an "user" attribute, you can do this:
In app.component.ts:
...
export class MyApp {
constructor(public userProvider: UserProvider) {
...
And, in app.html use *ngIf directive:
<ion-menu id='menu' [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngIf="userProvider.user">
<button ion-item>
Preparaciones
</button>
<button ion-item>
Revisiones
</button>
<button ion-item (click)='openCuenta()'>
Cuenta
</button>
</ion-list>
</ion-content>
</ion-menu>
I'm new to ionic and I want to know how to add an <ion-menu> for just one component (the first tab of my tabs section). how can I do this?
I need add this:
<ion-menu [content]="mycontent">
<ion-content>
<button ion-button (click)="show_message()">
</buttont>
</ion-content>
this is my code:
https://stackblitz.com/edit/ionic-5bunxz?file=pages/contact/contact.ts
Modify your tab 1 page (AboutPage in your case) like below
<ion-menu [content]="content">
<ion-header no-shadow no-border>
<ion-item no-lines>
<!-- Phase 2/3 PLEASE DO NOT DELETE THIS -->
<ion-avatar menuClose item-start>
<!-- <ion-avatar menuClose item-start> -->
<img [src]="'assets/imgs/user.png'">
</ion-avatar>
<h2>Test Emp</h2>
<h3>test3333</h3>
<p>Test4564565</p>
</ion-item>
</ion-header>
<ion-content style="background: #fff">
<ion-list no-lines>
<ion-item class="drawer-item" menuClose >
<ion-icon name="home" item-start></ion-icon>
Test
</ion-item>
<ion-item class="drawer-item" menuClose >
<ion-icon name="briefcase" item-start></ion-icon>
Test2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-header no-shadow no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-uppercase>About</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding #content>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>
add your menu component code in the app component page. So, your app.component.html page will look like below.
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Welcome Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose 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>
You can add dynamic pages from the component file as shown below.
Here is my app.component.ts file.
export class MyApp {
pages: Array<{title: string, component: any}>;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.pages = [{title: 'Home', component: HomePage},
{title: 'About', component: AboutPage}];
}
}
So, now this menu bar will be shown on each page of your app. Now, suppose you want to hide this page in About page then you can write below code in the component of your about page.
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public menu: MenuController) {}
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
}
So, by following above method you can hide menu button in any of your pages.
<ion-header>
<ion-navbar>
<ion-title>Physics</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding has-header contentTop="200px">
<ion-list class="chapter-list">
<button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button>
</ion-list>
</ion-content>
This is my code in which <ion-content> is hiding behind <ion-header>.
My ionic version is 3.19.1.
How to fix this.
I have tried has-header as well.
Try adding <ion-grid></ion-grid> inside ion-content tag
<ion-header>
<ion-navbar>
<ion-title>Physics</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding has-header contentTop="200px">
<ion-grid>
<ion-list class="chapter-list">
<button ion-item no-padding *ngFor="let chapterList of chapterLists" (click)="chapterListItemClk(event)" no-border> {{ chapterList.video_name }} <img src="{{chapterList.video_icon}}" item-left alt=""> </button>
</ion-list>
</ion-grid>
</ion-content>