I am struggling to add a 'burger' menu into the blank ionic2 template. Not sure what am doing wrong here but all I have done is generate a blank ionic template, change template string to templateUrl in the app.ts and paste code into app.html. Am not getting any console errors.
app.ts:
import {Component} from '#angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';
#Component({
templateUrl: 'build/app.html'
})
export class MyApp {
rootPage: any = HomePage;
constructor(platform: Platform) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
}
ionicBootstrap(MyApp);
app.html:
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item (click)="openPage(loginPage)">
Login
</button>
<button ion-item (click)="openPage(signupPage)">
Signup
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage"></ion-nav>
I was missing the button
<button right menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
From home.html
<ion-navbar *navbar>
<ion-title>
Blank Starter
</ion-title>
<button right menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
<ion-content class="home">
<h1 text-center>Content goes here!</h1>
</ion-content>
Related
I am having dynamic cards in my ionic project and I want to add dynamic images for different cards.
this is my .html code:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title *ngFor="let file_uri of row"><p>{{file-uri.name}}</p></ion-title>
</ion-navbar>
</ion-header>
<ion-content class="cards-bg social-cards">
<ion-card *ngFor="let uri of card">
<p ion-button color="light" clear>{{uri.myurl}}hi</p>
<ion-item (click)="OpenContentPage()">
<ion-avatar item-start>
<img src="{{uri.myurl}}">
<p>{{uri.myurl}}</p>
</ion-avatar>
<h2>Marty McFly</h2>
<p>November 5, 1955</p>
</ion-item>
<img src="{{uri.myurl}}" (click)="OpenContentPage()">
<ion-card-content (click)="OpenContentPage()">
<p>hello</p>
</ion-card-content>
</ion-card>
</ion-content>
this is my .ts code:
card: Array<any>; //array of arrays
constructor(public nav: NavController, public navParams: NavParams) {
var temp1 = [{myurl: 'assets/img/advance-card-bttf.png', code: 'i am gandhar'},
];
//console.log(this.navParams.get("temp1"));
this.card = [];
this.card.push(temp1);
this.card.push(temp1);
console.log(this.card);
}
It's giving me dynamic cards but, it is not displaying image and data from object.
Can anyone help?
Remove this brackets [] and it will display image and data. Try like this:
var temp1 = {myurl: 'assets/img/advance-card-bttf.png', code: 'i am gandhar'};
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>
I am very new to Ionic 2 and I am unable to change my side menu background color and also the menu-header color of my app. Any help appreciated! Below is the code snippet and the desired result(image). I have numbered the requirements for convenience. Also, it would be very helpful if someone can help with the implementation of drop down option(requirement no. 3). Basically it would contain some sub-list items. Thanks in advance!
<ion-menu [content]="content">
<ion-header no-border>
<ion-toolbar color = "white">
<ion-title class="titletext" style="display:inline-block" >
<div style = "width : 100%; height : 100%; background-color : white">
<div style = "float:left;width:75%">
<h3>MY APP </h3>
</div>
<div style = "float:right;width:25%">
<img src = "assets/icon/reports.PNG" />
</div>
</div>
</ion-title>
<!--<img src="assets/icon/Wemart_Icon.png" alt="logo" height="40px" width = "40px" > -->
</ion-toolbar>
</ion-header>
<ion-content>
<div style = "color : #3DBCC0; width:100%; height : 100%">
<ion-list>
<!--<button menuClose ion-item *ngFor="let p of myPages" (click)="openPage(p)">
<span text-color="my-custom-color2">{{p.title}}</span>
</button>-->
<button ion-item>
<ion-icon name="home" item-left></ion-icon> HOME
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> PORTFOLIO ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> EXPENSES
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> UTILITY ANALYTICS
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> TERMS OF USE
</button>
<button ion-item>
<ion-icon name="home" item-left></ion-icon> SIGN OUT
</button>
</ion-list>
</div>
</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>
I am adding variables.scss code below:
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
#import "ionic.globals";
// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
$toolbar-background: white;
$toolbar-wp-title-text-align : left;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
color1 : #8FAADC,
color2 : #DAE3F3,
color3: #3DBCC0
);
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.
#import "ionic.theme.default";
// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/
#import "ionic.ionicons";
// Fonts
// --------------------------------------------------
#import "roboto";
#import "noto-sans";
in order to give background color to swidemenu you have to open app.css and copy paste the below code. basically ion-menu has a content block just like pages. so you have to change the background color of that page( sidemenu )
ion-menu{
ion-content{
background-color:red !important;
}
}
<ion-toolbar yourcolorname>
If you declare a color in the scss like you did with color1, color2 etc. And then you can use your colors as in the example above.
You can create div as header following <ion-list> within <ion-content>
. then apply style to the header and accordingly to the <ion-list>as well.
<ion-menu [content]="content">
<ion-content>
<!--Menu Header-->
<div>
........
</div>
<!--Menu list-->
<ion-list>
</ion-list>
</ion-content>
</ion-menu>
then have ion-navbar in each page you need toolbar.
<ion-header no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Now, your next requirement is to have nested menus
// Menu model
export interface MenuOptionModel {
iconName: string;
displayName: string;
component: any;
subItems?: Array<MenuOptionModel>;
}
export class MyApp {
showSubmenu: boolean = false;
options: any[];
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.initializeApp(platform, statusBar, splashScreen);
this.getMenuOptions();
}
getMenuOptions() {
this.options = new Array<MenuOptionModel>()
// Load simple menu options
// ------------------------------------------
this.options.push({
iconName: 'icon_home',
displayName: 'HOME',
component: HomePage
});
this.options.push({
iconName: 'icon_settings',
displayName: 'Expenses',
component: null,
subItems: [
{
displayName: 'Exp 1',
component: Exp1Page
},
{
displayName: 'Exp 2',
component: Exp2Page
}
]
});
}
menuItemHandler() {
this.showSubmenu = !this.showSubmenu;
}
Menu Template Page
<ion-list>
<div *ngFor="let option of options">
<button menuClose ion-item *ngIf="!option.subItems" class="menu-style" (click)="openPage(option)">
<ion-label text-wrap mode="md" >
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
</button>
<div *ngIf="option.subItems && option.subItems.length > 0" class="div-sub-item">
<button ion-item (click)="menuItemHandler()">
<ion-label text-wrap mode="md">
<ion-icon [name]="option.iconName" aria-hidden="true" role="presentation" item-left></ion-icon>
{{ option.displayName }}
</ion-label>
<ion-icon name="icon_down" aria-hidden="true" role="presentation" item-right></ion-icon>
</button>
<div class="settings-menu-divider">
</div>
<ion-list mode="md" >
<div *ngFor="let item of option.subItems" id="side-nav" mode="md">
<button menuClose ion-item submenu-item class="submenu-style" *ngIf="showSubmenu" (click)="openPage(item)"
mode="md">
<ion-label text-wrap mode="md">
<ion-icon name="icon_bullet" aria-hidden="true" role="presentation"
item-left ></ion-icon>
{{ item.displayName }}
</ion-label>
</button>
<div *ngIf="showSubmenu" class="sub-menu-divider"></div>
</div>
</ion-list>
</div>
</div>
</ion-list>
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.
I am trying to use toggle in my navbar to switch languages between English and German.
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ 'CATALOGUE' | translate }}</ion-title>
<ion-buttons end>
<ion-list>
<ion-item>
<ion-toggle [(ngModel)]="language"></ion-toggle>
</ion-item>
</ion-list>
</ion-buttons>
This basically looks ugly. What's the correct way of using such toggle button in navbar?
You can do something like
html
<ion-header>
<ion-navbar>
<ion-title>
Stackoverflow
</ion-title>
<ion-buttons end>
<button ion-button (click)="toggleClick()">
<ion-toggle #autoToggle [(ngModel)]="autoRefresh" checked="true"></ion-toggle>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
ts
import { Component, ViewChild } from '#angular/core';
import { NavController, Toggle } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
autoRefresh = true;
#ViewChild('autoToggle') autoToggle: Toggle;
constructor() {}
toggleClick() {
this.autoToggle.checked = !this.autoToggle.checked;
}
}
I know this is too late but hope it helps anyone with similar problem.
I'm using ionic 3 and this thing worked as intended for me
Using toggle button in navbar:
<ion-buttons end>
<ion-toggle (ionChange)="onToggle($event)" [(ngModel)]="language"></ion-toggle> // ionChange event will fire every time when you change the toggle state
</ion-buttons>
If putting it inside <ion-buttons end></ion-buttons> doesn't work try using <ion-buttons right></ion-buttons instead. Get <ion-toggle></ion-toggle> from the ion-list and ion-item because they have white background as default, put it inside the ion-buttons.
You can also make the ion-item's background to transparent by adding a class to it and do some css styling or inline styling.