Ion-tab components are not showing

@iku wrote:

When I use <ion-nav> the tab buttons are displaying but the components of that tab are not displaying, If I do not use <ion-nav> and put <ion-tabs> directly under <ion-app> it works fine.

tabs485×528 1.57 KB

When I click any of tab button the components are displaying immediately

tabs2417×533 5.64 KB

In my index.html file

<ion-app>
  <ion-router>
    <ion-route url="/" component="page-one"></ion-route>
    <ion-route url="/two" component="page-two"></ion-route>
  </ion-router>
  <ion-nav><ion-nav>
</ion-app>

In my .js file

  connectedCallback() {
    this.innerHTML = `
<ion-tabs>
  <ion-tab tab="chats" label="Chats" icon="chatbubbles">
    <ion-content fullscreen>
      <h1>Hello this is chat tab</h1>
      <ion-button href="#/two">Next 1</ion-button>
    </ion-content>
  </ion-tab>

  <ion-tab tab="people" label="people" icon="people">
    <ion-content fullscreen>
      <h1>Hello this is people tab</h1>
      <ion-button href="#/two">Next 2</ion-button>
    </ion-content>
  </ion-tab>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="chats"></ion-tab-button>
    <ion-tab-button tab="people"></ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
`;
  }
});

customElements.define('page-two', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-button>
    <ion-title>Page two</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h1>This is the second page<h1>
</ion-content>
`;
  }
});

Test code link: https://codepen.io/manucorporat/pen/GBexob?editors=1010

Note: I’m not using any framework like angular or react.

Posts: 1

Participants: 1

Read full topic