Ion-tabs use with ion-segment


#1

Did anybody use ion-segment with ion-tabs in a page ?
For ion-segment I used it to change page as like ion-tabs but I used ion-segment on the top with ion-header…
I got a problem when I used it with tabs, it’s effect to tabs when I clicked on ion-segment, the button tabs was gone…
Please help !!
Sorry for my English !


#2

Can you post your page template?


#3

I put segment with tabs page here it is:

Tabs.html

Tabs.ts:

import { Component } from ‘@angular/core’;
import { IonicPage, NavController } from ‘ionic-angular’;
import { HomePage } from ‘…/home/home’;
import { CategoriesPage } from ‘…/categories/categories’;
import { YoutubeVideoPage } from ‘…/youtubevideo/youtubevideo’;
import { SearchPage } from ‘…/search/search’;
import { AboutPage } from ‘…/about/about’;
import { Segment } from ‘ionic-angular/components/segment/segment’;

@IonicPage()
@Component({
selector: ‘page-tabs’,
templateUrl: ‘tabs.html’
})
export class TabsPage {
rootPage: any;

homeRoot : any = HomePage;
aboutRoot : any = AboutPage;
videoRoot : any = YoutubeVideoPage;
categoriesRoot: any = CategoriesPage;
searchRoot : any = SearchPage;

constructor(public navCtrl: NavController) {
}

selectedTabChanged(seg: Segment): void {
let segval = seg.value;
if (segval === ‘news’) {
//this.navCtrl.setRoot(HomePage);
this.rootPage = HomePage;
} else if (segval === ‘read’) {
this.rootPage = CategoriesPage;
//this.navCtrl.setRoot(CategoriesPage);
}
}
}


#4

put your tabs in footer


#5

Thanks for reply but it’s still not work because I used for change the root page when I click on segments button…


#6

If I put like this the tabs work but segments button non work for me… !!


#7

may be you can add tabs in your both read and news segment page !!:sweat_smile::sweat_smile::wink: