<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
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
}
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()"
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.
I have an array of objects that I want to loop through in my template and output as cards. I have it working currently using *ngfor and now I want to change it to use collection repeat instead.
Here is my code:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { TowersModel } from '../../app/models/towers-model';
#Component({
selector: 'page-towers',
templateUrl: 'towers.html'
})
export class TowersPage {
towers: any;
constructor(public navCtrl: NavController){
this.towers = [
{
"name" : "Tower 1",
"image" : "http://placehold.it/350x150"
},
{
"name" : "Tower 2",
"image" : "http://placehold.it/350x150"
},
{
"name" : "Tower 3",
"image" : "http://placehold.it/350x150"
}
];
}
}
Template:
<ion-header>
<ion-navbar>
<ion-title>
Towers
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<ion-card *ngFor="let tower of towers">
<img src="{{ tower.image }}" alt="{{tower.name}}">
<ion-item>
<h2>{{tower.name}}</h2>
<p>11 N. Way St, Madison, WI 53703</p>
</ion-item>
<ion-item>
<span item-left>18 min</span>
<span item-left>(2.6 mi)</span>
<button ion-button icon-left clear item-right>
<ion-icon name="navigate"></ion-icon>
Start
</button>
</ion-item>
</ion-card>
</ion-content>
</ion-content>
So as mentioned this approach works fine. If I try and change it though to use a collection repeat instead like so:
<ion-header>
<ion-navbar>
<ion-title>
Towers
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-content>
<ion-item collection-repeat="let tower of towers">
<h1>Tower {{tower.name}}</h1>
</ion-item>
</ion-content>
</ion-content>
Then I get the following error:
Runtime Error
Error in ./TowersPage class TowersPage - caused by: Cannot read property 'name' of undefined
I think you are using ionic 2 and you need to use vitualScroll instead of collection-repeat.
<ion-list [virtualScroll]="towers">
<ion-item *virtualItem="let tower">
{{ tower.name }}
</ion-item>
</ion-list>