I have a menu toggle in my tabs.ts , It's working perfectly, but when returning to the previous page and re-entering to tabs, I click in the menuToggle but it's not working. Why is this happening?, first time working but later not working.
Please Help me.
This is my tabs.ts with my menutoggle :
<ion-menu [content]="content" >
<ion-header>
<ion-toolbar>
<img class="avatar" src="assets/img/i2.png">
<div class="name-user">{{nombre}} {{apellido}}</div>
<div class="rut-user">{{rut}}</div>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list>
<div class="items-menu">
<div class="item-menu" (click)="scan()">
<ion-icon name="md-qr-scanner"></ion-icon>
<div class="title">Escanear Producto</div>
</div>
<div class="item-menu">
<ion-icon name="md-person"></ion-icon>
<div class="title">Perfil</div>
</div>
<div class="item-menu">
<ion-icon name="md-settings"></ion-icon>
<div class="title">Opciones</div>
</div>
<div class="item-menu">
<ion-icon name="md-information-circle"></ion-icon>
<div class="title">Acerca De</div>
</div>
<div class="item-menu" (click)="cerrarsesion()" >
<ion-icon name="md-log-out"></ion-icon>
<div class="title">Cerrar Sesion</div>
</div>
</div>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="true" ></ion-nav>
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Carro" tabIcon="cart" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Perfil" tabIcon="md-person" ></ion-tab>
</ion-tabs>
This is where I call the menu :
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu" class="color-icon"></ion-icon>
</button>
<ion-buttons end>
<button icon-only ion-button (click)="refreshPage()">
<ion-icon name="md-refresh" class="color-icon"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
I think this problem i related to the issue here.
First the cause:
When you navigate to a page, the page html content is supposed to be added within <ng-component></ng-component> element, but instead it's added outside it. That gives it a higher z-index over the menu and it's overlay. So, when you toggle the menu, it's actually activated but you just can't see it.
Now the workaround
Add the following to your app.scss file or anywhere that it can be effective globally:
ng-component{
&.app-root{
z-index: 10000;
}
}
The value 10,000 of the z-index is so that it will be above the pages that are added outside the ng-component but still below the modals and popovers which are above 10,000.
Related
I am currently working on a game/app which a criteria-based point game. I using the technologies, Ionic 3 with Angular which helps with the GUI and ease of testing and deployment.
The issue I am having is : I can't get my score variable to change (go up) when the add point button is clicked.
What I have tried : Declaring it as a variable in many different ways with no avail. I'm still new to HTML and JS so any help would be appreciated. It's still super work in progress!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core#4.7.4/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script>
function openMenu() {
document.querySelector('ion-menu-controller');
.open();
}
function p1point(){
var p1pp = document.getElementById("p1p")
p1pp = p1pp + 1
}
</script>
</head>
<body>
<ion-app>
<ion-menu side="start">
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Point Game</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<!--Player 1 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 1</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p1p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size = -1>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col>
<ion-card>
<!--Player 2 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 2</ion-card-subtitle>
<ion-card-title class = "ion-text-center" ><var>0</var></ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button id = "p1plus" onclick="p1point()"> + </ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</div>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>
Your code has some Syntex errors:
function openMenu() {
document.querySelector('ion-menu-controller').open();
}
function p1point(){
var p1pp = document.getElementById("p1p").innerText; //getting text inside element
p1pp = parseInt(p1pp) + 1; //Increment
document.getElementById("p1p").innerHTML = p1pp; // Writing values
}
BACKGROUND:
For some time all the click events were working for my Ionic app, then out of no where they have stopped. I have two floating action buttons that once had working click events; one would trigger a JS alert popup, and the other would open a modal.
These click events no longer work, the only elements that have working click events now are my ion-tab-buttons.
WHAT I HAVE TRIED/TESTED:
I have tried unwrapping these elements out of ion-items and ion-lists, still no change.
A simple ion-button as a replacement, still no change.
Moving the ion-button outside of the card element just below the opening ion-content tag, still no change.
Moving the ion-button outside of the ion-content; just above the tabs, still no change.
Any help is greatly appreciated.
contact.page.html
<ion-header class="navbar">
<div class="icons">
<ion-buttons slot="start">
<ion-menu-button color="tertiary"></ion-menu-button>
</ion-buttons>
<img src="assets/logo.png" />
</div>
</ion-header>
<ion-content text-center>
<ion-card>
<ion-card-header>
<ion-card-title>Contact Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<br>
<ion-card-content>
<ion-label><b>Head Office: Wembley</b>
<br>
Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
DX: 51165 Wembley Park
We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
</ion-label>
<br>
<br>
<ion-list text-left>
<ion-item>
<ion-label>Call us on 0800 3881 0211</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
<ion-icon name="call"></ion-icon>
</ion-fab-button>
</ion-item>
<ion-item>
<ion-label>Email at admin#boutiquesolicitors.co.uk</ion-label>
<ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
<ion-icon name="mail"></ion-icon>
</ion-fab-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button (click)="about()">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()">
<ion-icon color="blue" name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button class="activeTab">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
contact.page.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router'
import { CallNumber } from '#ionic-native/call-number/ngx';
import { ModalController, AlertController } from '#ionic/angular';
import { EmailPage } from '../email/email.page';
#Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }
ngOnInit() {
}
about() {
console.log('clicked about')
this.router.navigate(['members/menu/about'])
}
dashboard() {
console.log('clicked dashboard')
this.router.navigate(['members/menu/dashboard'])
}
async callAlert() {
console.log('method executed')
const callAlert = await this.alertController.create({
message: "Are you sure you want to call Boutique Solicitors?",
buttons: [{
text: "Cancel",
role: "cancel"
},
{
text: "Call",
handler: () => {this.callBS()}
}
]
});
callAlert.present()
}
async callBS() {
this.callNumber.callNumber("07847948252", false)
.then(res => console.log('Launched dialer!', res))
.catch(err => console.log('Error launching dialer', err))
}
async modalEmail() {
const modal = await this.modalController.create ({
component: EmailPage
});
modal.present();
}
}
Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.
The answer provided here is not correct. There is a misunderstanding on how tabs work from OP. Tabs are meant to be full page UI components, and are not meant to be embed in other pages/components. Meaning that they should be the only content in a page.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="ellipse"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="square"></ion-icon>
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This way the tabs are responsible for render the nested content, and events work as expected.
The answer from #mhartington above, is the correct answer. For Angular, tabs should be the page that loads other pages as child modules inside tabs-routing.module.ts.
Well, I ended up figuring it out myself. The issue is that when ion-tabs are placed outside of the 'ion-content' at the bottom, if you inspect element on Chrome Dev Tools you can see that for some reason their "click-zone" takes up the whole page, and is indexed in front of all other elements. Trying to use "z-index" css property will not resolve the issue.
The fix is to wrap the ion-tabs inside an ion-toolbar, below the closing 'ion-content' tag. This will fix the click-zone to the restricted ion-toolbar height, which resolves the issue. All other page elements (click) events will now fire. This also fixes the issue of when tabs can prevent a page from scrolling.
Tested on both Android and iOS.
Ciao ciao.
that's exactly what i am searching thanks
Question: How can I create a swipable side menu for an ionic v4 vuejs app?
So I'm new to ionic and have been trying to migrate an existing web app to ionic. Following the steps on the limited articles up on ionic4 with vue. I installed #ionic/core, added the CDN to the index file, and the ignore flag for [/ion/] web compoenets right before mounting Vue.
I'm currently getting this error: Menu: must have a "content" element to listen for drag events on.
I'm a bit unsure of what to follow as many of the articles out there are on ion v2 and v3, I know there were a few changed made to how the ui-components and based on ionic4 beta docs what I have seems to be correct:'
<script lang="ts" src="./Layout.ts"></script>
<template>
<div class="layoutComponent">
<ion-page>
<ion-menu>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<ion-item>
<router-link :to="{name: 'link 1'}">
<ion-label full>
<eg-localizer token="1"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<router-link :to="{ name: 'link2'}">
<ion-label full>
<localizer token="2"></localizer>
</ion-label>
</router-link>
</ion-item>
<ion-item>
<a target="_blank" href="https://foo.com">
<ion-label full>
<localizer token="external link 3"></localizer>
</ion-label>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<!-- main point of entry for app content -->
<slot></slot>
</ion-page>
</div>
</template>
The documentation on ionic framework it's a bit unclear or incomplete, but I was able to make the menu working:
<template>
<ion-menu side="start" content-id="menu-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="menu-content">
<ion-list lines="full">
<ion-item v-for="item in items" :key="item.name">
<ion-icon :name="item.icon" slot="start"></ion-icon>
<ion-label>{{ item.name }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</template>
<script>
export default {
data () {
return {
items: [
{ name: 'Home', icon: 'home', href: 'home' },
{ name: 'About', icon: 'information-circle', href: 'about' },
{ name: 'Articles', icon: 'list-box', href: 'articles' },
{ name: 'Log out', icon: 'logout', href: 'logout' }
]
}
}
}
</script>
The key is here:
<ion-menu side="start" content-id="menu-content">
and here
<ion-content id="menu-content">
Hope this helps anyone.
For Ionic 6 + Vue js 3.0 make sure you have your component <ion-router-outlet /> inside a <ion-content>, and that ion-content should have the id you have specified in content-id parameter for the menu.
<ion-content id="main">
<ion-router-outlet />
</ion-content>
I want to create a simple shopping list app with the price.
This is my shopping.html
<ion-header>
<ion-navbar color="secondary">
<ion-title align="center">
My Shopping Tracker
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addItem()"><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.type}}</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.today}}</h2>
<p>{{item.type}}</p>
<p>{{item.total}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="delete(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button (click)="edit(item)">
<ion-icon name="redo"></ion-icon>Edit
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar >
<ion-title>{{total}}</ion-title>
</ion-toolbar>
</ion-footer>
This is the addshopping.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Shopping List
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Date:</ion-label>
<ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Type:</ion-label>
<ion-input type="text" [(ngModel)]="type"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description:</ion-label>
<ion-input type="text" [(ngModel)]="description"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Total Amount:</ion-label>
<ion-input type="text" [(ngModel)]="total"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveItem()">Save</button>
</ion-content>
This is my addlist.ts
import { Component } from '#angular/core';
import { NavController, ViewController } from 'ionic-angular';
#Component({
selector: 'page-addlist',
templateUrl: 'addlist.html'
})
export class AddListPage {
type: string;
description: string;
today: Date;
total: price;
constructor(public navCtrl: NavController, public view: ViewController) {
}
saveItem(){
let newItem = {
type: this.type,
today: this.today,
description: this.description,
total: this.total,
};
this.view.dismiss(newItem);
}
close(){
this.view.dismiss();
}
}
How do I calculate the total price for each time I add up new item? and display it on the footer? I uploaded the image.
Do I need to change from string to number values? Or stay it as string?
You can use a function that returns the total price, like this
private getTotalPrice() {
let totalPrice = 0;
for (let item of itens) {
totalPrice += Number.parseFloat(item.total);
}
return totalPrice;
}
and then u can call it in the footer
[(ngModel)]="getTotalPrice()"
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon ios="ios-arrow-back" md="nbsons-arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>distributor</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
I am completely new to Ionic 3, could some one please tell me how to change back button icon in ionic 3 for Android
What is this ? md="nbsons-arrow-back"
Try Like this
try to replace this one
<ion-header>
<ion-navbar>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-title>distributor</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
and learn more about ionicons IonicIocns