Tabs

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

    Angular Tabs の例

    使用方法

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

    // app.module.ts
    
    ...
    import { IgxTabsModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxTabsModule],
        ...
    })
    export class AppModule {}
    

    igx-tab-header にコンテンツを提供することにより、タブ ヘッダーを設定します。タブの名前を設定するには、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>
    

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

    タブの配置

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

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

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

    タブのカスタマイズ

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

    Note

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

    はじめに 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 に設定されていることに注意してください。

    スタイル設定

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

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $dark-tabs: igx-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
    );
    

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

    Note

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

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

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

    CSS 変数をサポートしないブラウザー (IE 11 など) をターゲットにしている場合、テーマ コンポーネント ミックスインを使用してデフォルト テーマを上書きできます。

    :host {
      ::ng-deep {
        @include igx-tabs($dark-tabs);
      }
    }
    

    パレットおよび色

    上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用して色に関してより高い柔軟性を実現することができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $yellow-color: #F4D45C;
    $black-color: #292826;
    
    $dark-palette: igx-palette(
      $primary: $black-color,
      $secondary: $yellow-color,
      $grays: #fff
    );
    

    igx-color を使用して、パレットから簡単に取得することができます。

    $dark-tabs: igx-tabs-theme(
        $palette: $dark-palette,
        $item-text-color: igx-color($dark-palette, "secondary", 400),
        $item-background: igx-color($dark-palette, "primary", 400),
        $item-hover-background: igx-color($dark-palette, "secondary", 400),
        $item-hover-color: igx-color($dark-palette, "primary", 400),
        $item-active-color: igx-color($dark-palette, "secondary", 400),
        $item-active-icon-color: igx-color($dark-palette, "secondary", 400),
        $indicator-color: igx-color($dark-palette, "secondary", 400),
        $tab-ripple-color: igx-color($dark-palette, "secondary", 400)
    );
    

    API リファレンス

    テーマの依存関係

    その他のリソース

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