CODEWITHSUNDEEP
ionic-frameworkionic2
RSA
RSA

Reputation: 1449

how to set tabs into side menu pages in ionic 2?

I have this code

app.componnents.ts 

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;

  @ViewChild(Nav) nav: Nav;
 pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform){
     this.initializeApp();
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
}
}

app.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

tabs.html

<ion-tabs #tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

tabs.ts

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor( public navCtrl: NavController ) {
  }
}

page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button ion-button secondary menuToggle>Toggle Menu</button>
  <ion-item>
    <ion-label color="primary" fixed>Fixed Label</ion-label>
    <ion-input type="tel" pattern="\d*" maxlength="4" placeholder="Tel Input"></ion-input>
  </ion-item>

</ion-content>

I tried to add tabs into sidemenu pages but it almost failed. sidemenu uses totally different routing. any idea how to add tabs menu to side menu pages?

I used ion-footer tag in page1.html but it doesn't work properly.

<ion-footer>
  <ion-toolbar>
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
  </ion-toolbar>
</ion-footer>

enter image description here

Upvotes: 2

Views: 723

Answers (1)

Jose G Varanam
Jose G Varanam

Reputation: 767

Reza, I have done some work around on side menu combined with tabs

https://github.com/jvaranam/Ionic3-Sidemenu-tabs

Upvotes: 1

Related Questions