Hi there! I’m brand new (like day 3 right now) on Ionic. I’m building an app in V3 and want to have a side menu and tabs with different links. The tabs need to be visible, even when clicking a side-menu link.
Tabs: Page 1, Page 2, Page 3
Side Menu: Page 4, Page 5, Page 6
Here is my tabs.ts
import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { IonicPage, NavController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { EventsPage } from '../events/events';
import { DealsPage } from '../deals/deals';
import { BusinessesPage } from '../businesses/businesses';
import { StoriesPage } from '../stories/stories';
//SIDE MENU ITEMS
import { FavoritesPage } from '../favorites/favorites';
import { FriendsPage } from '../friends/friends';
import { MessagesPage } from '../messages/messages';
import { NotificationsPage } from '../notifications/notifications';
import { RewardsPage } from '../rewards/rewards';
import { OffersPage } from '../offers/offers';
import { SettingsPage } from '../settings/settings';
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 = EventsPage;
tab3Root: any = DealsPage;
tab4Root: any = BusinessesPage;
tab5Root: any = StoriesPage;
tab6Root: any = FavoritesPage;
tab7Root: any = FriendsPage;
tab8Root: any = MessagesPage;
tab9Root: any = NotificationsPage;
tab10Root: any = RewardsPage;
tab11Root: any = OffersPage;
tab12Root: any = SettingsPage;
mySelectedIndex: number;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.mySelectedIndex = navParams.data.tabIndex || 0;
}
}
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
export interface PageInterface {
title: string;
component: any;
index?: number;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// set our app's pages
appPages: PageInterface[] = [
{ title: 'Favorites', component: TabsPage, index: 5 },
{ title: 'Friends', component: TabsPage, index: 6},
{ title: 'Messages', component: TabsPage, index: 7},
{ title: 'Notifications', component: TabsPage, index: 8},
{ title: 'Rewards Cards', component: TabsPage, index: 9},
{ title: 'Special Offers', component: TabsPage, index: 10},
{ title: 'Settings', component: TabsPage, index: 11}
];
rootPage = TabsPage;
constructor(platform: Platform, public menu: MenuController) {
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();
//SplashScreen.hide();
});
}
openPage(page: PageInterface) {
// the nav component was found using @ViewChild(Nav)
// reset the nav to remove previous pages and only have this page
// we wouldn't want the back button to show in this scenario
this.menu.close();
if (page.index) {
this.nav.setRoot(page.component, { tabIndex: page.index });
} else {
this.nav.setRoot(page.component).catch(() => {
console.log("Didn't set nav root");
});
}
}
}
And my tabs.html
<ion-tabs [selectedIndex]="mySelectedIndex">
<ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="calendar"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="pricetags"></ion-tab>
<ion-tab [root]="tab4Root" tabIcon="cube"></ion-tab>
<ion-tab [root]="tab5Root" tabIcon="book"></ion-tab>
<ion-tab [root]="tab6Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab7Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab8Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab9Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab10Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab11Root" tabIcon="flower" show="false"></ion-tab>
<ion-tab [root]="tab12Root" tabIcon="flower" show="false"></ion-tab>
</ion-tabs>
So all the items with Icon=“flower” are my side-menu items.
My problem is that I only want the first five items to be shown in the TABS menu. I found the show property in the documentation, however when i set show = “false”, the links then no longer work from the side menu. Is there any way to hide the tab icons yet still have the side menu links work with those side-menu pages retaining TABS visibility?
Thanks in advance for your help