I couldn't find a question that helps me.
I've this on every one of my pages. The navbar is displaying, but the buttons aren't switching to other tabs. This is quite literally copied from the ionic start myApp tabs.
This is one of the pages:
<ion-header>
<ion-toolbar>
<ion-title>Playlists</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="saved">
<ion-icon name="heart"></ion-icon>
<ion-label>Saved</ion-label>
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="playlists">
<ion-icon name="list"></ion-icon>
<ion-label>Playlists</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
And this is my app-routing.modules.ts file:
import { NgModule } from '#angular/core';
import { PreloadAllModules, RouterModule, Routes } from '#angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'saved', pathMatch: 'full' },
{ path: 'saved', loadChildren: './pages/saved/saved.module#SavedPageModule' },
{ path: 'search', loadChildren: './pages/search/search.module#SearchPageModule' },
{ path: 'playlists', loadChildren: './pages/playlists/playlists.module#PlaylistsPageModule' }
];
#NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
Just went with the default tabs template again, you need a tabs router. I hadn't made any progress so it's fine.
Related
node v16.13.2
my package.json
"dependencies": {
...
"#ionic/vue": "^6.0.13",
"#ionic/vue-router": "^6.0.13",
"#popperjs/core": "^2.11.2",
"axios": "^0.25.0",
"core-js": "^3.6.5",
"vue": "^3.2.31",
"vue-axios": "^3.4.0",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/eslint-parser": "^7.17.0",
"#babel/eslint-plugin": "^7.16.5",
"#capacitor/cli": "3.4.1",
"#vue/cli-plugin-babel": "^5.0.4",
"#vue/cli-plugin-eslint": "^5.0.4",
"#vue/cli-service": "^5.0.4",
"#vue/compiler-sfc": "^3.2.31",
"eslint": "^8.12.0",
"eslint-plugin-vue": "^8.5.0",
"eslint-webpack-plugin": "^3.1.1"
},
App.vue
<template>
<ion-app><ion-page>
<router-view />
</ion-page></ion-app>
</template>
cart index component
<ion-content>
Cart
</ion-content>
cart archive component
<ion-content>
Archive
</ion-content>
router
{
path: "/cart/",
name: "cartTabsNav",
component: () => import("#/cart/TabsNav.vue"),
children: [
{
path: '',
redirect: 'index',
},
{
path: "index",
name: "cartIndexAction",
component: () => import("#/cart/IndexAction.vue"),
},
{
path: "archive",
name: "cartArchiveAction",
component: () => import("#/cart/ArchiveAction.vue"),
},
],
},
component TabsNav.vue
<ion-page>
<ion-content>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="index" href="/cart/index">
<ion-icon :icon="cart"></ion-icon>
<ion-label>Cart</ion-label>
</ion-tab-button>
<ion-tab-button tab="archive" href="/cart/archive">
<ion-icon :icon="reorderFourOutline"></ion-icon>
<ion-label>Orders</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
</ion-page>
But I see double layers with tabs! More on the screen.
And when I touch on the tabs I see this.
This is code from docs ionicframework.com https://ionicframework.com/docs/vue/navigation#working-with-tabs
I don't know what else to add, but the validator of the question asks so.
I have an ionic tab page containing event specific information to display.
Routing is set up so that you are routed to a specific event's tab page
tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom" mode="md">
<ion-tab-button tab="token">
<ion-icon src="/assets/svg/ticket-star.svg"></ion-icon>
<ion-label>Tokens</ion-label>
</ion-tab-button>
<ion-tab-button tab="transactions">
<ion-icon src="/assets/svg/empty-wallet-change.svg"></ion-icon>
<ion-label>Transactions</ion-label>
</ion-tab-button>
<div class="centerd-btn"></div>
<ion-tab-button tab="swipe">
<ion-icon src="/assets/svg/people.svg"></ion-icon>
<ion-label>Swipe</ion-label>
</ion-tab-button>
<ion-tab-button tab="buy">
<ion-icon src="/assets/svg/card.svg"></ion-icon>
<ion-label>Buy</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" hidden>
</ion-tab-button>
<ion-tab-button tab="notifications" hidden>
</ion-tab-button>
<ion-tab-button tab="help" hidden>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerLink="scan" routerLinkActive="active-tab" [routerLinkActiveOptions]="{exact:true}">
<ion-icon src="/assets/svg/qr-scan.svg"></ion-icon>
</ion-fab-button>
<ion-label>Scan at bar</ion-label>
</ion-fab>
</ion-tabs>
tabs-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: ':eventId',
component: TabsPage,
children: [
{
path: 'home',
loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
},
{
path: 'token',
loadChildren: () => import('../token/token.module').then(m => m.TokenPageModule)
},
{
path: 'transactions',
loadChildren: () => import('../transactions/transactions.module').then(m => m.TransactionsPageModule)
},
{
path: 'swipe',
loadChildren: () => import('../swipe/swipe.module').then(m => m.SwipePageModule)
},
{
path: 'buy',
loadChildren: () => import('../buy/buy.module').then(m => m.BuyPageModule)
},
{
path: 'scan',
loadChildren: () => import('../scan/scan.module').then(m => m.ScanPageModule)
},
{
path: 'notifications',
loadChildren: () => import('../notifications/notifications.module').then(m => m.NotificationsPageModule)
},
{
path: 'help',
loadChildren: () => import('../help/help.module').then(m => m.HelpPageModule)
},
{
path: 'user',
loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
},
{
path: '',
redirectTo: '/event/swipedrinks/home',
pathMatch: 'full'
}
]
},
{
path: '',
component: TabsPage
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
All works fine except for this <ion-fab> element's routing.
I can click it the first time and the app is routed correctly to for example /event/A4OUJTpgYfeNEF6e5k4v/scan but after clicking on another tab element you can't go back to the scan part.
I don't have any console errors so I don't really know where to start.
I guess Ionic is handling the tab attribute not the same as routerLink attribute in the ion-fab element but what is the alternative then?
Hi it seems like there is some issue in sol ionic faced same issue at side nav resolved issue by using (click)="navController.naviagteForward('event/scan')" and in constructor constructor(public navController:NavController)
I am working in Ionic App and I want to show the submenu in the sidebar. I am fetching the menus using the *ngFor but the problem is that I am not able to show the submenu.
This is my app.html:
<ion-menu [content]="content" side="left" type="overlay">
<ion-content class="mymenu22">
<ion-grid class="formenu11">
<h1 class="mymenuh11">OTHERS</h1>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
<ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
</button>
</ion-list>
</ion-content>
</ion-menu>
In this, I am showing the menus in the sidebar and I want to show the submenu for the first menu.
This is my app.component.ts:
pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
{ title1: 'About Us', component: AboutPage, name1: 'people' },
{ title1: 'Gallery', component: GalleryPage, name1: 'images' },
{ title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];
For the Manage Account, I want to show the submenu.
For the Manage Account, I want to show the submenu but I am not getting any code for this.
Any help is much appreciated.
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
{ title: 'Home', url: 'home', icon: 'home' },
{ title: 'About', url: '/about', icon: 'people' },
{ title: 'Contact', url: '/contact', icon: 'call' },
{ title: 'Gallery', url: '/gallery', icon: 'images' },
{ title: 'Setting', url: '/setting', icon: 'settings',
children: [
{ title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
{ title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
{ title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
] }
];
constructor() {}
}
==app.component.html==
<ion-app>
<ion-split-pane >
<ion-menu menuId="custom">
<ion-header>
<ion-toolbar >
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of appPages">
<ion-menu-toggle *ngIf="p.url">
<ion-item (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[p.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open"
[class.active-parent]="p.open" detail="false">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
<ion-icon slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
<ion-icon slot="end" name="arrow-dropright" *ngIf="!p.open"></ion-icon>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item style="padding-left: 20px;" *ngFor = "let sub of p.children" (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[sub.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="sub.icon"></ion-icon>
<ion-label class="menu-name">
{{sub.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
<ion-footer class="bar-stable" (click)="logout()">
<ion-menu-toggle>
<ion-item class="sign-out">
<ion-icon class="app-color logo" slot="end" name="log-out"></ion-icon>
<ion-label class="app-color name">Sign Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
I'm currently developing a mobile app with Ionic 4. I build it with Ionic CLI but I did a blank project. I created some component (like login, signup...) and after that, I added Tabs from Ionic.
My problem is, Ionic Tabs are presents only on pages in tabs.router.module.ts. How can I do to display Tabs on all pages ?
Except them, every component are in app-routing.module.ts, I tried to cut and paste them in tabs.router.module.ts but I'm not sure that's a good thing to do.
tabs.routes.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home-page/tab1.module#HomePageModule'
}
]
},
{
path: 'game/new',
children: [
{
path: '',
loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
For the moment my Tabs works, but I'm not sure to understand how they perfectly work. Thank you for your help.
Adding your routes as children to tabs in tab router file will let you acheive your goal.
If you want to display your tabs on every page put them into your app.component.html file.
Like:
<ion-app>
<ion-tab-button tab="tab1">
<ion-label>Label1</ion-label>
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Label2</ion-label>
<ion-icon name="card"></ion-icon>
</ion-tab-button>
</ion-app>
Don't forget to create your Routes and your Routing in your app-routing.module.ts now.
I have an application with 3 tabs (Home, About, Contact).
I have a menu that contains an item link to "News", this page displays a list of news. The Home page displays the list of news also.
I want the tabs to be visible in the News and News Details section.
If I navigate to news detail from the home page, the Home tabs stay selected, which is a normal behavior I guess.
When I open the news page from the menu, the home tabs stay selected also coz im using the outlet:home. Is it possible to keep the tabs visible in the news using another method? and even, how not to keep the home tabs selected if I go to news detail from the news page.
tabs.page.html
<ion-tabs>
<ion-tab label="Home" icon="home" href="/tabs/(home:home)">
<ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
<ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
</ion-tabs>
tabs.router.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
import { NewsPage } from '../news/news.page';
import { NewsDetailsPage } from '../news/news-details/news-details.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
outlet: 'home',
component: HomePage
},
{
path: 'news',
outlet: 'home',
component: NewsPage
},
{
path: 'news/news-details/:id',
outlet: 'home',
component: NewsDetailsPage
},
{
path: 'about',
outlet: 'about',
component: AboutPage
},
{
path: 'contact',
outlet: 'contact',
component: ContactPage
}
]
},
{
path: '',
redirectTo: '/tabs/(home:home)',
pathMatch: 'full'
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
app.component.html
<ion-app>
<ion-menu type="overlay">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item href="/tabs/(home:news)">
<ion-icon slot="start"></ion-icon>
<ion-label>
News
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
home.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
<ion-label>{{n.name}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
news.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
News
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let n of news" href="tabs/(home:news/news-details/{{n.id}})" detail="true">
<ion-label>{{event.name}}</ion-label>
</ion-item>
</ion-list>
</ion-content>