How to create Tabs

Ionic Framework ionic-v3
#1

Hello i want to create a font-awesome icons tabs.

I did this

home.ts

import { UploadPage } from ‘…/upload/upload’;

@Component({ selector: “page-home”, templateUrl: “home.html” })
export class HomePage {
tab4Root = SearchPage;
tab5Root = UploadPage;

home.html

  <ion-tab [root]="tab4Root" tabIcon="search">
  </ion-tab>

<ion-tab [root]=“tab5Root” tabIcon=“upload”>

I have two problems.

  1. the search icon appears as wanted but the Upload icon doesn’t appear (f093). Do i need to update anything.

  2. I change the Upload icon to something else e.g. <ion-tab [root]=“tab4Root” tabIcon=“woman”>
    and the woman icon appears. I create a value on the main.css file to show the Upload icon but the value dissapears when i hit reload. any idea why is that?

#2

use ion-segment it is easy to use then ion tab

#3

Thanks demokumar. Can you show me an example?

#4

yes @simonioannides see the example in ionic doc https://ionicframework.com/docs/api/components/segment/Segment/
hope so it helps you :slight_smile:

#5

i did this.

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <img ion-right src="assets/imgs/rs.png" class="navbarLogo" />
    <i class="fa fa-search" id="searchButton"></i>
    <i class="fa fa-upload" id="goldButton" title="Upload"></i>
  </ion-navbar>
</ion-header>

But how i do the tabs so it will go to the UploadPage

home.ts

import { UploadPage } from '../upload/upload';

@Component({ selector: "page-home", templateUrl: "home.html" })
export class HomePage 
    @ViewChild("updatebox") updatebox;
    tab4Root = UploadPage;

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import {Camera} from '@ionic-native/camera';
import { AuthService } from '../providers/auth-service';
import { SplitPane } from '../providers/split-pane';
import { Common } from '../providers/common';
import { HttpModule } from "@angular/http";
import { Welcome } from '../pages/welcome/welcome';
import { Login } from '../pages/login/login';
import { Signup } from '../pages/signup/signup';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { UploadPage } from '../pages/upload/upload';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MomentModule } from 'angular2-moment';
import { LinkyModule } from 'angular-linky';
import { AuthserviceProvider } from '../providers/authservice/authservice';

@NgModule({
  declarations: [
    MyApp,
    Welcome,
    Login,
    Signup,
    AboutPage,
    ContactPage,
    HomePage,
   TabsPage,
   UploadPage
  ],
  imports: [
    BrowserModule,HttpModule,MomentModule,LinkyModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Welcome,
    Login,
    Signup,
    AboutPage,
    ContactPage,
    HomePage,
      TabsPage,
    UploadPage
  ],
  providers: [
    StatusBar,
    SplashScreen,Camera,AuthService,SplitPane,Common,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
      AuthserviceProvider
  ]
})
export class AppModule {}
#6

i want to make the fa-search and fa-upload to be tabs and direct to another page. How will i do that? Thanks

#7

I used this.navCtrl.push(UploadPage); on a onClick function.

onClick() {
        this.navCtrl.push(UploadPage);
    }

<button ion-button (click)="onClick()">

How do you think of that?

#8