I'm not sure how to open the tab2Root, using a button from my help.html page. I'm reading the docs, but there's nothing about that.
help.html:
<button ion-button large clear icon-end color="primary">
Shop <ion-icon name="arrow-forward"></ion-icon>
</button>
tabs.html:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Products" tabIcon="search"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Cart" tabIcon="cart"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Account" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" tabTitle="Help" tabIcon="help-buoy"></ion-tab>
</ion-tabs>
You could create a function in the help.ts class which is something like this:
SwitchTab(){
this.navCtrl.parent.select(0); //Selects the first tab
}
In order to thave the navCtrl object available you have to inject that with the constructor of your class:
import { NavController } from 'ionic-angular';
...
constructor(private navCtrl: NavController) {
}
Don't forget to bind your button to the SwitchTab method in the class like this:
<button ion-button large clear icon-end color="primary" (click)="SwitchTab()">
Shop <ion-icon name="arrow-forward"></ion-icon>
</button>
Related
I was using this tutorial https://alligator.io/ionic/ionic-4-tabs/ to create Routing for my Ionic Tabs, but unfortunately the displayed content is always hidden and can't be shown.
My home.page.html looks like this:
<ion-header>
<ion-tabs style="display: contents;">
<ion-tab-bar slot="top">
<ion-tab-button tab="popular">
<ion-label>SOme text</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-header>
I defined the routings inside a home-routing.module.ts:
const routes: Routes = [
{
path: 'tabs',
component: HomePage,
children:
[
{
path: 'popular',
children:
[
{
path: '',
loadChildren: '../popular/popular.module#PopularPageModule'
}
]
}
]
}
]
And my popular.page.module.html looks like this:
<ion-header>
<ion-toolbar color="primary">
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Hallo</h1>
</ion-content>
I excpected so the h1-Tag "Hallo", but unfortunately it doesn't show anything. The interesting thing indeed, is that the h1-Tag is shown in Developer-Tools in the Browser.
Any ideas?
This has caused me a head headache XD. you shouldnt be putting your tabs in your header. the taps component/element is generated at the level above the page, where as the header element is generated within the page so sticking the tabs in the header is causeing all sorts of crazyness.
I went through the tutorial and got it to display correctly
home.page.html -
<ion-tabs>
<ion-tab-bar slot="top" color="primary">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>SOme text</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
please comment for stuff you want me to add
I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.
I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.
tabs.html
<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>
tabs.ts
presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
tabPopover.html
<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>
tabPopover.ts
openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}
Help would be appreciated!
Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs
there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question
Step 1:
we currently have 4 tab items, we add the extra tab items we need.
<ion-tab [root]="tab4Root" show= "false" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>
NOTE the show attribute
show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
this creates the ion-tab elements but hides them.
step 2:
we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>
page: tabs.ts
// we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef
#ViewChild('myTab') tabRef: Tabs;
presentPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
we need a way to reference this component (TabsPage), so we are passing it as a nav params
https://ionicframework.com/docs/api/components/popover/PopoverController/#create
https://ionicframework.com/docs/api/navigation/NavParams/#get
step 3:
page: popover.html
<button ion-item (click)="openPage(4)">
<ion-icon name="person" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage(5)">
<ion-icon name="cash" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage(6)">
<ion-icon name="settings" item-left></ion-icon>
Setting
</button>
// each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab
page: PopoverPage
// the tabs page ref
tabsPageRef: TabsPage;
constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
// recall the navpage: this from the TabsPage?
this.tabsPageRef = this.navParams.get('navpage');
}
openPage(pageName: any) {
// here, we are using the reference of the TabsPage to access the local variable tabref
this.tabsPageRef.tabRef.select(pageName)
}
I'm new to ionic. I have a component called firstPage, this has a normal html view.
<ion-header>
<ion-navbar >
<ion-title align="center">first.</ion-title>
</ion-navbar>
</ion-header>
<button ion-button
block
color="primary"
[navPush]="second">
Ir página 2 navPush.
</button>
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { secondPage} from '../index.paginas';
#Component({
selector: 'page-first',
templateUrl: 'first.html',
})
export class firstPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
second:any=secondPage;
}
and I have another component called secondPage.
<ion-header>
<ion-navbar>
<ion-title align-title="center">second</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
<!--<page-tabs></page-tabs>-->
</ion-content>
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { firstPage, Tab1Page,Tab2Page} from '../index.paginas';
#Component({
selector: 'page-second',
templateUrl: 'second.html',
})
export class secondPage {
Tab1Page,Tab2Page // are the component that has html and .ts
tab1: any;
tab2: any;
constructor() {
this.tab1 = Tab1Page;
this.tab2 = Tab2Page;
}
}
firstPage has a button to navigate directly to secondPage, but I want SecondPage to contain :
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1">tab1</ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab2">tab2</ion-tab>
</ion-tabs>
I want the second page to load the tabs only in this view
how can I do it?
Add tabs to second-page.html.
<ion-tabs color="primary" selectedIndex="1">
<ion-tab tabIcon="hammer" tabTitle="Tab2" [root]="tab1"></ion-tab>
<ion-tab tabIcon="hammer" tabTitle="Tab1" [root]="tab1"></ion-tab>
</ion-tabs>
Your SecondPage.ts class is OK. Only thing you need to do is add below code to your html which related with your Tab2Page.ts.
<ion-content padding>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>
I created a demo for you. find it here
I tried put a (click) event on the ion-tab element but nothing happens
<ion-tabs>
<ion-tab (click)="chat()" tabIcon="add-circle"></ion-tab>
</ion-tabs>
You should use (ionSelect) instead of (click):
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabIcon="add-circle"></ion-tab>
</ion-tabs>
And in the tabs code:
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
not sure why i am having such a hard time making tabs work in the ionic app..
Here is the html:
<body>
<ion-nav-bar class="bar-positive"> </ion-nav-bar>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
Here is the routing:
var app = angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
home: {
template: 'home.html',
}
}
});
$urlRouterProvider.otherwise('/home');
});
When I run this simple app, I expect the tab to display a title and icon.. but that's not happening..
There seems to be no explicit error messages which makes things worse.
http://plnkr.co/edit/K1nAtL
Just replace
<ion-tabs class="tabs-positive tabs-icon-only">
With
<ion-tabs class="tabs-positive tabs-icon-top">
then add the ionic font it will work.