I implemented a tabs with side menu interface as seen on https://www.djamware.com/post/587d543080aca723c115beaf/how-to-mixing-side-menu-and-tabs-in-ionic-2. Things are working well as it was inteded from the tutorial except for an issue. Take this example:
User is on Tab1.
User decides to navigate to Tab2, clicks Tab2.
User wants to navigate BACK to Tab1, clicks previous button on Chrome.
ISSUE: User is not able to navigate back when previous/back button is clicked, instead the url changes but the active Tab does not.
Back button works for all pages except on tabbed pages.
tabs.html
<ion-tabs [selectedIndex]="myIndex">
<ion-tab tabIcon="home" [root]="tab1Root" tabTitle="Home"></ion-tab>
<ion-tab tabIcon="timer" [root]="tab2Root" tabTitle="Schedules"></ion-tab>
<ion-tab tabIcon="briefcase" [root]="tab3Root" tabTitle="Cases"></ion-tab>
tabs.ts
#IonicPage()
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
tab1Root= 'HomePage';
tab2Root= 'SchedulePage';
tab3Root= 'CasesPage';
myIndex: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
The repo I am working on is at https://github.com/jjjhanreyyy/Prosecutor-App
From
#IonicPage()
#Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
change it to
#IonicPage({
segment: 'page-tabs'
})
#Component({
templateUrl: 'tabs.html'
})
This is derived from this Github repo.
Related
In my Ionic 3 project I've implemented a simple list like this:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-dossiers',
templateUrl: 'dossiers.html'
})
export class DossiersPage {
public heroes;
constructor(public navCtrl: NavController) {
this.heroes = [
{id: 1, name:'Superman'},
{id: 2, name:'Batman'},
{id: 5, name:'BatGirl'},
{id: 3, name:'Robin'},
{id: 4, name:'Flash'}
];
}
}
And than in the HTML:
<ion-content>
<ion-list>
<button ion-item *ngFor="let hero of heroes">
{{ hero.name }}
</button>
</ion-list>
</ion-content>
Now I've a problem with the rendering of the list, because the color of the label of each item is white and I don't see anything.
How I can solve this issue?
This is the result:
this is how the items are displayed
this is what I see if I touch the item
PS: Sorry for my bad english.
Have you edited the .scss file inside the page folder?
if not try adding a color="primary" or color="secondary" to your button tag.
I have the following Tabs configured in my project:
tabs.html
<ion-tabs tabsPlacement="bottom" [selectedIndex]="0">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="pulse"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information"></ion-tab>
</ion-tabs>
When in the "Home" page (tab1Root), there is a button to change the Root Page to a "Home v2" page.
home.html
<ion-content class="has-header" padding>
<div padding style="text-align: center;">
<h1>Home v1</h1>
<ion-button button (click)="setRootTab1ToHome2()">
Set Root of TAB1 to Home v2
</ion-button>
</div>
</ion-content>
home.ts
import { NavController } from 'ionic-angular/index';
import { Home2Page } from 'home2.ts'
import { Component } from "#angular/core";
#Component({
templateUrl:"home.html"
})
export class HomePage {
constructor(private nav: NavController) {
}
setRootTab1ToHome2() {
this.nav.setRoot(Home2Page);
}
}
If the TAB1 root page is changed by clicking the available button and then I change to the TAB "About" and change back to the TAB "Home", I will see the Page "Home v2" instead of "Home".
BUT, if I click twice on the TAB "Home" it will get back to Page "Home".
How can I restore TAB "Home" root Page to "Home v1" instead of "Home v2" when changing from Tab to Tab? Like the behavior of clicking twice on TAB "Home", but with 1 click only.
Please check the project in the Plunker:
https://plnkr.co/F5hAvypKxb9mhQDm3SDw
I created a page with 3 tabs using ionic 2.Inside one page I created one button and on click of that button I navigate to a new child page by executing
the push command but whenever I am clicking the tab containing the child page I am not able to see the root page instead I see the new child page.
I want to see the root page on revisit of the tab page.
Below is my code.. here you can check in about.html i have placed one button to navigate to a child page.Navigation is happening but once I navigate then I am not able to see the about tab page without clicking on back button
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '#angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {
}
}
abuot.html
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="navigate()" ion-button color="secondary">GO to LIst</button>
<!-- <button [navPush]="listPage" ion-button color="secondary">Go To About</button> -->
<!-- <button ion-button color="secondary">Secondary</button> -->
</ion-content>
about.ts
import { Component } from '#angular/core';
import {ListPage} from '../list/list';
import {ViewController, NavController} from 'ionic-angular';
#Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController,public viewctr: ViewController) {
}
navigate(){
this.navCtrl.push(ListPage);
}
}
Just a stab in the dark since we cannot see any of your code (which should be an addition to any question on here). You could try using .setRoot() to get to the root page you're wanting.
import { NavController } from 'ionic-angular';
import { NameOfPage } from '../NameOfPage';
pageYouWant: any = NameOfPage;
constructor(public navctrl: NavController){}
onClickFunction(){
this.navCtrl.setRoot(pageYouWant)
}
I have three tabs as follows:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" (ionSelect)="goToPreviousPage()" tabTitle="Back" tabIcon="arrow-back"></ion-tab>
<ion-tab [root]="tab3Root" (ionSelect)="goToNextPage()" tabTitle="Next" tabIcon="arrow-forward"></ion-tab>
</ion-tabs>
So tab 1 loads the main content and the other two tabs are for navigating the app. Here is the tabs component:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
#Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any;
tab3Root: any;
navCtrl;
constructor(navCtrl: NavController) {
this.navCtrl = navCtrl;
}
goToPreviousPage(){
// Need logic to navigate back in history for Tab 1
}
goToNextPage(){
//Logic to navigate forward in Tab 1 content
}
}
Is there a way to get the NavController for Tab1 so as to navigate it's history, or is there a way to get component for tab 1, so as to call methods defined within it?
What you are trying to do is not really what the tab layout is intended for. When using tabs, each tab has it's own history stack. But in your case, you only seem to use one history stack and want to navigate forward and backwards on that. So my suggestion would be to instead not use the tab navigation, but just one page and then put a tab-bar into the footer of the page. Then you can assign (click) methods to the tabs.
However, I'm not sure if this is good design. I have never seen an app that used this kind of tab-navigaton. People will expect the default tab behaviour and will be confused when it behaves otherwise. What are you trying to do exactly? What is the workflow of your app?
I would start with a new, blank project and start from there. ionic start myApp blank --v2 Maybe you could also use a side menu for navigating to different parts of your app.
ion-tabs and ion-content overlaps ion-header when i load an image in the header, it only happens the first time i'm visiting the page, after that it loads well.
this is the component
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
public image: string;
appName = 'Ionic App';
constructor(public navController: NavController) { }
ionViewDidLoad(){
this.image = "https://source.unsplash.com/640x300/?technology"
}
}
Here is the html
<ion-header>
<ion-navbar>
<ion-title></ion-title>
</ion-navbar>
<img class="cabecera" [src]="image" width="100%">
</ion-header>
<ion-content padding class="contenido">
Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>.
</ion-content>
Its posible to view an example in this plunker
https://plnkr.co/edit/CpBXmn?p=preview
The problem is that you are only loading the image (in the ionViewDidLoad function) after the rest of the content is loaded. After loading the image you need to resize the content, as described in this issue.
Add ViewChild and Content to your imports from #angular/core and ionic-angular, respectively:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
Use #ViewChild to select the class for the ion-content component:
// ...
export class HomePage {
#ViewChild(Content) content: Content;
// ...
Then, once the image is loaded, call the resize method on content:
this.content.resize();