Help us understand the problem. What is going on with this article?

Tabsの作成・追加【Ionic】

More than 1 year has passed since last update.

開発環境

開発環境(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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした