Angular Tabs (タブ) コンポーネントの概要

Ignite UI for Angular Tabs は、関連するコンテンツを 1 つのタブ付きビューで整理およびグループ化することを主な目的とするフル機能のユーザーインターフェースコンポーネントです。これにより、スペースを節約し、コンテンツをよりわかりやすくします。アニメーション、テンプレート化、カスタマイズオプションなどのさまざまな機能がパックされています。

Angular のタブは、多くのコンテンツを含む Web ページをカテゴリに分類し、簡潔かつスペース効率の良い方法で表示する必要がある場合に非常に便利です。

Ignite UI for Angular igx-tabs コンポーネントは、同様なデータセットの体系化や切り替えに使用します。igx-tab-item のラッパーとして機能し、それぞれデータのコンテナーおよびタブヘッダーを表します。Angular Tabs コンポーネントは、タブを上側に配置して複数のタブ項目がある場合にスクロールを許可します。

Angular Tabs の例

これは、一度に 1 つのビューしか表示できない別のタブ内に 1 つのタブがある Angular のネストされたタブの基本的な例です。Angular でネストされたタブを使用して、より適切で構造化された方法で情報を表示できます。

Ignite UI for Angular Tabs を使用した作業の開始

Ignite UI for Angular Tabs コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxTabsModule をインポートします。

// app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';
// import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTabsModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxTabsComponent をスタンドアロンの依存関係としてインポートすることも、IGX_TABS_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tabs>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 1 content.
        </igx-tab-content>
      </igx-tab-item>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 2</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 2 content.
        </igx-tab-content>
      </igx-tab-item>
    </igx-tabs>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TABS_DIRECTIVES]
    /* or imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective] */
})
export class HomeComponent {}

Ignite UI for Angular Tabs モジュールまたはディレクティブをインポートしたので、igx-tabs コンポーネントの使用を開始できます。

Angular Tabs の使用

igx-tab-header にコンテンツを提供することにより、Angular Tabs ヘッダーを設定します。タブの名前を設定するには、igxTabHeaderLabel ディレクティブを使用してスパンを追加するだけです。タブ項目のコンテンツとして表示されるコンテンツは、igx-tab-content タグの間に追加する必要があります。

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 1</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 1 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 2</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 2 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 3</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 3 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 4</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 4 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 5</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 5 content.
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

サンプルを構成した後、結果は以下のようになります。

Angular Tabs の配置

IgxTabs tabAlignment 入力プロパティは、タブの配置と配置の方法を制御します。start、center、end、justify の 4 つの異なる値を受け入れます。

Start (デフォルト): タブヘッダーの幅はコンテンツ (ラベル、アイコン、両方) によって異なり、すべてのタブに同じパディングがあります。最初のタブは、タブコンテナーの左側に配置されます。
Center: タブヘッダーの幅はコンテンツによって異なり、タブコンテナーの中央を占めます。スペースが足りない場合、スクロールボタンが表示されます。
End (デフォルト): タブヘッダーの幅はコンテンツによって異なり、すべてのタブに同じパディングがあります。最後のタブは、タブコンテナーの右側に配置されます。
Justify: すべてのタブヘッダーは幅が等しく、タブコンテナーに完全に適合します。スペースが足りない場合、スクロールボタンが表示されます。

以下のサンプルは、tabAlignment プロパティ値を切り替えるときにタブがどのように整列されるかを示しています。

Angular Tabs のカスタマイズ

タブに igxTabHeaderIcon ディレクティブを追加します。igx-tabs コントロールはマテリアルデザイン アイコンと互換性があるため、アプリケーションにアイコンを簡単に追加できます。

Note

これまでアプリケーションで igx-icon を使用したことがない場合は、続行する前に必ず app.module.ts の IgxIconModule をインポートしてください。

はじめに Material Icons をメインアプリケーションフォルダーの 'styles.scss' ファイルにインポートします。次に、igx-tab-header の子として、igxTabHeaderIcon ディレクティブが設定された igx-icon を追加します。

// styles.scss

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>library_music</igx-icon>
        <span igxTabHeaderLabel>Albums</span>
    </igx-tab-header>
    <igx-tab-content>
        Albums
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>favorite</igx-icon>
        <span igxTabHeaderLabel>Favorite</span>
    </igx-tab-header>
    <igx-tab-content>
        Favorite
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>info</igx-icon>
        <span igxTabHeaderLabel>Details</span>
    </igx-tab-header>
    <igx-tab-content>
        Details
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

サンプルを正しく構成した場合、タブは以下の例のようになります。

ラベルとアイコンを設定するだけでは不十分な場合は、igx-tab-header タグの間に独自のカスタムコンテンツを直接提供することもできます。

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <!-- your custom tab content goes here -->
      <div>
        <img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
             width="80px" height="40px">
      </div>
    </igx-tab-header>
    <igx-tab-content>
      <h1>IgniteUI Rocks!</h1>
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

igxPrefix および igxSuffix ディレクティブを使用するだけで、独自のカスタムタブヘッダーのプレフィックスとサフィックスを追加することもできます。以下のサンプルは、カスタムヘッダーコンテンツとプレフィックス/サフィックスを含むタブを追加する方法を示しています。

ルーターアウトレットコンテナーとの統合

igx-tabs コンポーネントは、タブ項目ごとにコンテンツが指定されたタブのリストとして使用することを目的としています。しかし、コンテンツがタブコンテンツとは別のタブ項目を定義する場合があります。

タブ項目を定義する際にディレクティブを適用することができます。たとえば、この機能を使用して、Angular Router を使用してビュー間のナビゲーションを実現できます。次の例は、igx-tabs コンポーネントを構成して、単一の router-outlet で 3 つのコンポーネントを切り替える方法を示しています。

まず、igx-tabs コンポーネントを保持するメインコンポーネントと、デモ用のコンテンツを含む 3 つのビューコンポーネントが必要です。簡単にするために、ビューコンポーネントには短いテンプレートがあります

import { Component } from '@angular/core';

@Component({
    selector: 'app-tabs-routing',
    styleUrls: ['tabs-routing.component.scss'],
    templateUrl: 'tabs-routing.component.html'
})
export class TabsRoutingComponent { }

@Component({
    template: '<p>Tab 1 Content</p>'
})
export class TabsRoutingView1Component { }

@Component({
    template: '<p>Tab 2 Content</p>'
})
export class TabsRoutingView2Component { }

@Component({
    template: '<p>Tab 3 Content</p>'
})
export class TabsRoutingView3Component { }

次のステップでは、app-routing.module.ts ファイルに適切なナビゲーションマッピングを作成します。

import { RouterModule, Routes } from '@angular/router';

import {
    TabsRoutingComponent,
    TabsRoutingView1Component,
    TabsRoutingView2Component,
    TabsRoutingView3Component
} from './tabs-routing.component';

...

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/tabs-routing'
  },
  {
    path: 'tabs-routing',
    component: TabsRoutingComponent,
    children: [
        { path: 'view1', component: TabsRoutingView1Component },
        { path: 'view2', component: TabsRoutingView2Component },
        { path: 'view3', component: TabsRoutingView3Component },
      ]
  }
];

@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(appRoutes)]
})
export class AppRoutingModule { }

すべてのナビゲーションルートがセットアップされたので、igx-tabs コンポーネントを宣言し、ルーティング用に構成する必要があります。ビューコンポーネントをレンダリングするための router-outlet を必ず追加してください。

<!-- tabs-routing.component.html -->

<igx-tabs #tabs1>
  <igx-tab-item
      routerLinkActive
      #rla1="routerLinkActive"
      [selected]="rla1.isActive"
  >
      <igx-tab-header routerLink="view1">
          <span igxTabHeaderLabel>Tab 1</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla2="routerLinkActive"
      [selected]="rla2.isActive"
  >
      <igx-tab-header routerLink="view2">
          <span igxTabHeaderLabel>Tab 2</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla3="routerLinkActive"
      [selected]="rla3.isActive"
  >
      <igx-tab-header routerLink="view3">
          <span igxTabHeaderLabel>Tab 3</span>
      </igx-tab-header>
  </igx-tab-item>
</igx-tabs>

<router-outlet></router-outlet>

上記のコードは、3 つのタブ項目を持つ igx-tabs コンポーネントを作成します。各タブ硬毛区のヘッダーには、ナビゲーションに使用されるルーティングリンクを指定するために使用される RouterLink ディレクティブが適用されています。リンクのいずれかがアクティブになると、RouterLinkActive ディレクティブの isActive プロパティにバインドされるため、対応するタブ項目の selected プロパティが設定されます。このようにして、選択したタブ項目は常に現在の URL パスと同期します。

Note

routerLink ディレクティブは、直接 igx-tab-item ではなく、igx-tab-header に設定されていることに注意してください。

スタイル設定

タブのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在するテーマモジュールをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

次に、tabs-theme を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。

$dark-tabs: tabs-theme(
  $item-text-color: #f4d45c,
  $item-background: #292826,
  $item-hover-background: #f4d45c,
  $item-hover-color: #292826,
  $item-active-color: #f4d45c,
  $item-active-icon-color: #f4d45c,
  $indicator-color: #f4d45c,
  $tab-ripple-color: #f4d45c
);

Note

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

次に、tabs-theme を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。

Note

タブのコンテンツの一部として使用されるコンポーネントをスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成する必要があります。

最後にコンポーネントのテーマを含めます。

@include css-vars($dark-tabs);

デモ

API リファレンス

テーマの依存関係

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular Tabs (タブ) コンポーネントの概要

Angular Tabs の例

Ignite UI for Angular Tabs を使用した作業の開始

Angular Tabs の使用

Angular Tabs の配置

Angular Tabs のカスタマイズ

Note

ルーター アウトレット コンテナーとの統合

Note

スタイル設定

Note

Note

デモ

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

ルーターアウトレットコンテナーとの統合