Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@umi_mori

Tabsの作成・追加【Ionic】

開発環境

開発環境(ionic infoの結果)は、以下の通りだが、Ionic3で実行した。
スクリーンショット 2018-10-30 14.51.54.png

目標

テンプレートにあるような3つタブではなく、以下のような5つのタブを作成・追加したい。

スクリーンショット 2018-10-30 14.50.28.png

手順①:Tabsの作成

  1. Terminalで、ionic g tabsと入力する。
  2. そのタブのセットの名前を決める(What should the name be?)
  3. タブの個数を入力(How many tabs?)
  4. それぞれのタブの名前を入力(Name of this tab:)
  5. [OK] Generated a tabs page named [TabsName]!と出ればOK。

>>Tabsの作成の例

generateTabs
^CUserNames-Mac-Pro:sample UserName$ ionic g tabs
? What should the name be? customTabs
? How many tabs? 5
? Name of this tab: tabA
? Name of this tab: tabB
? Name of this tab: tabC
? Name of this tab: tabD
? Name of this tab: tabE
[OK] Generated a tabs page named customTabs!

手順②:TabsのComponent設定

(以下、タブのセットの名前をcustomTabsとした場合)

  1. app.component.tsのファイルを開く。(src < app < app.component.ts)
  2. 作成されたTabsのディレクトリから、そのページをインポートする。
    コード:import { CustomTabsPage } from '../pages/custom-tabs/custom-tabs;'

  3. もしもアプリの初期画面をタブのページにしたい場合は、rootPage:anyをCustomTabsPageにする。
    コード:rootPage:any = CustomTabsPage;

>>Component設定のサンプルコード

app.component.ts
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//2. Importing the CustomTabsPage
import { CustomTabsPage } from '../pages/custom-tabs/custom-tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  //3. Setting the rootPage to CustomTabsPage
  rootPage:any = CustomTabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

手順③:TabsのModuleへの追加

app.module.tsファイルの中の、declarationsentryComponentsの中に追記する。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

//Added Provider
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { CustomTabsPage } from '../pages/custom-tabs/custom-tabs';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    CustomTabsPage // 1. Add CustomTabsPage here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    CustomTabsPage // 2. Add CustomTabsPage here 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

参考URL

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What are the problem?