Tabs

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

Tabs デモ

Note

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、すべての必要な依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。「インストール」のトピックで手順を参照できます。

使用方法

Ignite UI for Angular Tabs コンポーネントを初期化する前に IgxTabsModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';

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

label およびコンテンツを持つ複数のタブ グループを指定します。

<igx-tabs>
  <igx-tabs-group label="Tab 1">This is Tab 1 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 2">This is Tab 2 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 3">This is Tab 3 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 4">This is Tab 4 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 5">This is Tab 5 content.</igx-tabs-group>
</igx-tabs>

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

Tabs タイプ

2 種類のタブがあります。fixed または contentfit タブを選択するには、tabsType 入力を設定します。

  • contentfit タブ (デフォルト): タブ ヘッダーの幅はコンテンツ (ラベル、アイコン、両方) に基づいて決定され、すべてのタブのパディングが等しくなります。 選択したタブのタイプに関係なく、タブ ヘッダーの幅は指定した最小幅および最大幅によって制限されます。
  • fixed タブ: すべてのタブ ヘッダーは同じ幅を持ち、Tabs コンテナーに一致します。提供されたスペースが足りない場合、スクロール ボタンが表示されます。
<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
  <h4 class="sample-title">CONTENT-FIT TABS</h4>
  <igx-navbar title="Contacts" actionButtonIcon="menu">
    <igx-icon>search</igx-icon>
    <igx-icon>more_vert</igx-icon>
  </igx-navbar>
  <igx-tabs>
    <igx-tabs-group label="HOME">Home content.</igx-tabs-group>
    <igx-tabs-group label="RECENT CONTACTS">Recent contacts list.</igx-tabs-group>
    <igx-tabs-group label="MORE INFORMATION ABOUT SELECTED CONTACT">More detailed contact information.</igx-tabs-group>
  </igx-tabs>
</div>

<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
  <h4 class="sample-title">FIXED TABS</h4>
  <igx-navbar title="Contacts" actionButtonIcon="menu">
    <igx-icon>search</igx-icon>
    <igx-icon>more_vert</igx-icon>
  </igx-navbar>
  <igx-tabs tabsType="fixed">
    <igx-tabs-group label="HOME">Home content.</igx-tabs-group>
    <igx-tabs-group label="RECENT CONTACTS">Recent contacts list.</igx-tabs-group>
    <igx-tabs-group label="MORE INFORMATION ABOUT SELECTED CONTACT">More detailed contact information.</igx-tabs-group>
  </igx-tabs>
</div>

タブのカスタマイズ

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

最初に Material+Icons をメイン アプリケーション フォルダーの 'styles.css' ファイルにインポートします。

// styles.css

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-tabs>
  <igx-tabs-group label="MY ALBUMS" icon="library_music">
    <div style="margin: 15px">
      <igx-card>
        <igx-card-header class="compact">
          <igx-avatar src="assets/images/card/avatars/alicia_keys.jpg" roundShape="true"></igx-avatar>
          <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">HERE</h3>
            <h5 class="igx-card-header__subtitle">by Alicia Keys</h5>
          </div>
        </igx-card-header>
        <igx-card-actions>
          <div class="igx-card-actions__bgroup">
            <button igxButton igxRipple>PLAY</button>
          </div>
        </igx-card-actions>
      </igx-card>
    </div>
  </igx-tabs-group>
  <igx-tabs-group label="FAVOURITES" icon="favorite">
    <div style="margin: 15px">
      <h5 class="igx-card-header__subtitle">Add your favourite songs here.</h5>
    </div>
  </igx-tabs-group>
  <igx-tabs-group label="INFO" icon="info">
    <div style="margin: 15px">
      <h5 class="igx-card-header__subtitle">"Here" is the sixth studio album by American singer and songwriter Alicia Keys.</h5>
    </div>
  </igx-tabs-group>
</igx-tabs>

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

タブのラベルおよびアイコンの変更を拡張する場合、各タブ ヘッダーでカスタム テンプレートを作成することもできます。

<igx-tabs>
    <igx-tabs-group>
        <ng-template igxTab>
            <div>
                <!-- your custom tab content goes here -->
            </div>
        </ng-template>
        <h1>Tab content</h1>
    </igx-tabs-group>
</igx-tabs>

Tabs と Routing の使用

以下は、Tabs コンポーネントの使用と基本的なルーティングの例です。Angular Routing と Navigation について説明します。

igxTabで基本的なルーティングを実装するには、igxTab ディレクティブを使用して igx-tabs の項目ヘッダーを再テンプレート化し、ng-templaterouter-outlet でリンクを提供します。ng-template コンテンツは、デフォルト タブ ヘッダーのスタイルをオーバーライドすることに注意してください。

<!-- tabs-sample-1.component.html -->
<igx-tabs #tabs1>
  <igx-tabs-group *ngFor="let routerLink of routerLinks">
    <ng-template igxTab>
      {{routerLink.label}}
      <a routerLink="{{routerLink.link}}"></a>
    </ng-template>
  </igx-tabs-group>
</igx-tabs>

<div>
  <router-outlet></router-outlet>
</div>
// tabs-sample-1.component.ts
this.routerLinks = [
  {
    label: 'View 1',
    link: '/view1',
    index: 0
  }, 
  {
    label: 'View 2',
    link: '/view2',
    index: 1
  },
  {
    label: 'View 3',
    link: '/view3',
    index: 2
  },
];

URL パスを特定のコンポーネントにマップするために必要となるすべてのルート定義を宣言します。URL パスを含むすべての子コンポーネントは、メインルーティングモジュール app.routing.module.ts にインポートされる別のルーティング モジュールの tabs.routing.module.ts にリストされます。RouterModule.forChild メソッドでルーターを構成します。

// tabs.routing.module.ts
const routes: Routes = [
    // simple links
    { path: 'view1', component: View1Component },
    { path: 'view2', component: View2Component },
    { path: 'view3', component: View3Component },
    { path: '', redirectTo: 'view1', pathMatch: 'full' }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class TabsRoutingModule { }

RouterModule.forRoot メソッドを使用してメイン ルーターを構成します。

// app.routing.module.ts
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsSample1Component
  },
  { path: '', redirectTo: '/tabs', pathMatch: 'full' }
];

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

戻る/次へ ブラウザー ボタンを処理するために ngOnInit に以下のコードを追加し、IgxTabsGroupComponent select メソッドを使用して関連性のあるタブ グループをアクティブ化します。

// tabs-sample-1.component.ts
constructor(private router: Router) {}

public ngOnInit() {
  // Initial view loaded
  this.router.navigate(['view1']);

  // Handle the back/forward browser buttons
  this._navigationEndSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((args) => {
  const index = this.routerLinks.indexOf(this.routerLinks.find(tab => tab.link === this.router.url));
  (this.tabs.groups.filter(item => item.index === index)[0] as IgxTabsGroupComponent).select();
  });
}

他のルーター アウトレットを Tabs コンテンツに使用

コンテンツ内にビューを描画する場合は、名前付きルーター アウトレットを使用します。onTabItemSelected イベント ハンドラーを実装して特定のビューへ移動、描画します。

<!-- tabs-sample-1.component.html -->
<!-- router-outlet inside the tabs items content -->
<igx-tabs #tabs1 (onTabItemSelected)="navigate($event)">
  <igx-tabs-group label="Product1" name="product1">
    <router-outlet name="product1"></router-outlet>
  </igx-tabs-group>
  <igx-tabs-group label="Product2" name="product2">
    <router-outlet name="product2"></router-outlet>
  </igx-tabs-group>
  <igx-tabs-group label="Product3" name="product3">
    <router-outlet name="product3"></router-outlet>
  </igx-tabs-group>
</igx-tabs>
// tabs-sample-1.component.ts
public navigate(eventArgs) {
    const selectedIndex = eventArgs.group.index;
    switch(selectedIndex) {
      case 0: {
        this.router.navigate(['/productDetails',
          {
            outlets:
            {
              product1: ['product1']
            }
          }
        ]);
        break;
    }
    case 1: {
      this.router.navigate(['/productDetails',
        {
          outlets:
          {
            product2: ['product2']
          }
        }
      ]);
      break;
    }
    case 2: {
      this.router.navigate(['/productDetails',
          {
            outlets:
            {
              product3: ['product3']
            }
          }
        ]);
        break;
      }
    }
  }

URL パスを特定のコンポーネントにマップするために必要となるすべてのルート定義を宣言します。

// tabs.routing.module.ts
const routes: Routes = [
  {
    // children outlets
    path: 'productDetails',
    children: [
      { path: 'product1', component: View1Component, outlet: 'product1' },
      { path: 'product2', component: View2Component, outlet: 'product2' },
      { path: 'product3', component: View3Component, outlet: 'product3' },
      { path: '', redirectTo: 'product1', pathMatch: 'full' }
    ]
  },
  {
    path: '',
    redirectTo: '/productDetails',
    pathMatch: 'full'
  }
];
...

API リファレンス

その他のリソース

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