As a newcomer to development, I have decided to use Ionic Framework 7 for my project, utilizing vanilla JavaScript. I have successfully implemented tabbed navigation using the code below. Now, I am looking to allow page navigation within each tab, but I am encountering difficulties with ion-router - perhaps it is not the appropriate tool or maybe my implementation is incorrect.
<style>
.example-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<ion-tabs>
<ion-tab tab="home">
<ion-nav id="home-nav"></ion-nav>
<div id="home-page">
<ion-header>
<ion-toolbar>
<ion-title>Listen now</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Listen now content</div>
**<ion-router>
<ion-route url="/" component="page-one"></ion-route>
<ion-route url="/page-two" component="page-two"></ion-route>
</ion-router>
<ion-router-outlet></ion-router-outlet>**
</ion-content>
</div>
</ion-tab>
<ion-tab tab="radio">
<ion-nav id="radio-nav"></ion-nav>
<div id="radio-page">
<ion-header>
<ion-toolbar>
<ion-title>Radio</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Radio content</div>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="library">
<ion-nav id="library-nav"></ion-nav>
<div id="library-page">
<ion-header>
<ion-toolbar>
<ion-title>Library</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Library content</div>
</ion-content>
</div>
</ion-tab>
<ion-tab tab="search">
<ion-nav id="search-nav"></ion-nav>
<div id="search-page">
<ion-header>
<ion-toolbar>
<ion-title>Search</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="example-content">Search content</div>
</ion-content>
</div>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="play-circle"></ion-icon>
Listen Now
</ion-tab-button>
<ion-tab-button tab="radio">
<ion-icon name="radio"></ion-icon>
Radio
</ion-tab-button>
<ion-tab-button tab="library">
<ion-icon name="library"></ion-icon>
Library
</ion-tab-button>
<ion-tab-button tab="search">
<ion-icon name="search"></ion-icon>
Search
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
<script>
const homeNav = document.querySelector('#home-nav');
const homePage = document.querySelector('#home-page');
homeNav.root = homePage;
const radioNav = document.querySelector('#radio-nav');
const radioPage = document.querySelector('#radio-page');
radioNav.root = radioPage;
const libraryNav = document.querySelector('#library-nav');
const libraryPage = document.querySelector('#library-page');
libraryNav.root = libraryPage;
const searchNav = document.querySelector('#search-nav');
const searchPage = document.querySelector('#search-page');
searchNav.root = searchPage;
</script>
<script>
class PageOne extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
This is the content for page 1.
<ion-router-link href="#/page-two">
<ion-button>Go to Page 2</ion-button>
</ion-router-link>
</ion-content>`;
}
}
class PageTwo extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
This is the content for page 2.
</ion-content>`;
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
</script>