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 でネストされたタブを使用して、より適切で構造化された方法で情報を表示できます。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxIconModule,
IgxTabsModule
} from "igniteui-angular" ;
import { TabsSample3Component } from "./tabs-sample-3/tabs-sample-3.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsSample3Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxIconModule,
IgxTabsModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-sample-3' ,
styleUrls : ['./tabs-sample-3.component.scss' ],
templateUrl : './tabs-sample-3.component.html'
})
export class TabsSample3Component { }
ts コピー <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 >
html コピー igx-tab-content {
padding : 8px ;
}
scss コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Ignite UI for Angular Tabs を使用した作業の開始
Ignite UI for Angular Tabs コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
cmd
Ignite UI for Angular については、「はじめに 」トピックをご覧ください。
次に、app.module.ts ファイルに IgxTabsModule
をインポートします。
...
import { IgxTabsModule } from 'igniteui-angular' ;
@NgModule ({
...
imports : [..., IgxTabsModule],
...
})
export class AppModule {}
typescript
あるいは、16.0.0
以降、IgxTabsComponent
をスタンドアロンの依存関係としてインポートすることも、IGX_TABS_DIRECTIVES
トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
import { IGX_TABS_DIRECTIVES } from 'igniteui-angular' ;
@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]
})
export class HomeComponent {}
typescript
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 >
html
サンプルを構成した後、結果は以下のようになります。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxIconModule,
IgxTabsModule
} from "igniteui-angular" ;
import { TabsSample1Component } from "./tabs-sample-1/tabs-sample-1.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsSample1Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxIconModule,
IgxTabsModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-sample-1' ,
styleUrls : ['./tabs-sample-1.component.scss' ],
templateUrl : './tabs-sample-1.component.html'
})
export class TabsSample1Component { }
ts コピー <igx-tabs >
<igx-tab-item >
<igx-tab-header >
<span igxTabHeaderLabel > Tab 1</span >
</igx-tab-header >
<igx-tab-content > 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 > 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 > 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 > 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 > Tab 5 Content</igx-tab-content >
</igx-tab-item >
</igx-tabs >
html コピー igx-tab-content {
padding : 8px ;
}
scss コピー
Angular Tabs の配置
IgxTabs
tabAlignment
入力プロパティは、タブの配置と配置の方法を制御します。start、center、end、justify の 4 つの異なる値を受け入れます。
Start (デフォルト): タブ ヘッダーの幅はコンテンツ (ラベル、アイコン、両方) によって異なり、すべてのタブに同じパディングがあります。最初のタブは、タブ コンテナーの左側に配置されます。
Center : タブ ヘッダーの幅はコンテンツによって異なり、タブ コンテナーの中央を占めます。スペースが足りない場合、スクロール ボタンが表示されます。
End (デフォルト): タブ ヘッダーの幅はコンテンツによって異なり、すべてのタブに同じパディングがあります。最後のタブは、タブ コンテナーの右側に配置されます。
Justify : すべてのタブ ヘッダーは幅が等しく、タブ コンテナーに完全に適合します。スペースが足りない場合、スクロール ボタンが表示されます。
以下のサンプルは、tabAlignment
プロパティ値を切り替えるときにタブがどのように整列されるかを示しています。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxButtonGroupModule,
IgxIconModule,
IgxTabsModule,
IgxButtonModule,
IgxRippleModule
} from "igniteui-angular" ;
import { TabsAlignmentComponent } from "./tabs-alignment/tabs-alignment.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsAlignmentComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule,
IgxIconModule,
IgxTabsModule,
IgxButtonModule,
IgxRippleModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-alignment' ,
templateUrl : './tabs-alignment.component.html'
})
export class TabsAlignmentComponent {
public tabAlignment = 'start' ;
public tabAlignments = [
{ label : 'start' , selected : this .tabAlignment === 'start' , togglable : true },
{ label : 'center' , selected : this .tabAlignment === 'center' , togglable : true },
{ label : 'end' , selected : this .tabAlignment === 'end' , togglable : true },
{ label : 'justify' , selected : this .tabAlignment === 'justify' , togglable : true }
];
changeAlignment (event ) {
this .tabAlignment = this .tabAlignments[event.index].label;
}
}
ts コピー <igx-buttongroup [values ]="tabAlignments" (selected )="changeAlignment($event)" >
</igx-buttongroup >
<igx-tabs [tabAlignment ]="tabAlignment" >
<igx-tab-item >
<igx-tab-header >
<span igxTabHeaderLabel > Home</span >
</igx-tab-header >
<igx-tab-content >
Home Content.
</igx-tab-content >
</igx-tab-item >
<igx-tab-item >
<igx-tab-header >
<span igxTabHeaderLabel > Recent</span >
</igx-tab-header >
<igx-tab-content >
Recent contact list.
</igx-tab-content >
</igx-tab-item >
<igx-tab-item >
<igx-tab-header >
<span igxTabHeaderLabel > More</span >
</igx-tab-header >
<igx-tab-content >
More detailed contact information.
</igx-tab-content >
</igx-tab-item >
</igx-tabs >
html コピー
Angular Tabs のカスタマイズ
タブに igxTabHeaderIcon
ディレクティブを追加します。igx-tabs
コントロールはマテリアル デザイン アイコン と互換性があるため、アプリケーションにアイコンを簡単に追加できます。
これまでアプリケーションで 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' );
...
css
<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 >
html
サンプルを正しく構成した場合、タブは以下の例のようになります。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxIconModule,
IgxTabsModule
} from "igniteui-angular" ;
import { TabsSample3Component } from "./tabs-sample-3/tabs-sample-3.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsSample3Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxIconModule,
IgxTabsModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-sample-3' ,
styleUrls : ['./tabs-sample-3.component.scss' ],
templateUrl : './tabs-sample-3.component.html'
})
export class TabsSample3Component { }
ts コピー <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 >
html コピー igx-tab-content {
padding : 8px ;
}
scss コピー
ラベルとアイコンを設定するだけでは不十分な場合は、igx-tab-header
タグの間に独自のカスタム コンテンツを直接提供することもできます。
<igx-tabs >
<igx-tab-item >
<igx-tab-header >
<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 >
html
igxPrefix
および igxSuffix
ディレクティブを使用するだけで、独自のカスタム タブ ヘッダーのプレフィックスとサフィックスを追加することもできます。以下のサンプルは、カスタム ヘッダー コンテンツとプレフィックス/サフィックスを含むタブを追加する方法を示しています。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxIconModule,
IgxTabsModule,
IgxButtonGroupModule,
IgxButtonModule,
IgxRippleModule
} from "igniteui-angular" ;
import { TabsHeaderPrefixSuffixComponent } from "./tabs-header-prefix-suffix/tabs-header-prefix-suffix" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsHeaderPrefixSuffixComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxIconModule,
IgxTabsModule,
IgxButtonGroupModule,
IgxButtonModule,
IgxRippleModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-header-prefix-suffix' ,
templateUrl : './tabs-header-prefix-suffix.html'
})
export class TabsHeaderPrefixSuffixComponent {
public tabs = [{
image : 'https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png' ,
header : 'Tab1' ,
content : 'Content1'
}, {
image : 'https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png' ,
header : 'Tab2' ,
content : 'Content2'
}, {
image : 'https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png' ,
header : 'Tab3' ,
content : 'Content3'
}];
closeTab (index: number ) {
this .tabs.splice(index, 1 );
}
}
ts コピー <igx-tabs >
<igx-tab-item *ngFor ="let item of tabs; let i = index" >
<igx-tab-header >
<img igxPrefix src ="{{item.image}}" height ="20px" width ="20px" />
<h6 > {{item.header}}</h6 >
<button igxButton ="icon" igxSuffix (click )="closeTab(i)" >
<igx-icon > close</igx-icon >
</button >
</igx-tab-header >
<igx-tab-content >
{{item.content}}
</igx-tab-content >
</igx-tab-item >
</igx-tabs >
html コピー
ルーター アウトレット コンテナーとの統合
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 { }
typescript
次のステップでは、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 { }
typescript
すべてのナビゲーション ルートがセットアップされたので、igx-tabs
コンポーネントを宣言し、ルーティング用に構成する必要があります。ビュー コンポーネントをレンダリングするための router-outlet を必ず追加してください。
<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 >
html
上記のコードは、3 つのタブ項目を持つ igx-tabs
コンポーネントを作成します。各タブ硬毛区のヘッダーには、ナビゲーションに使用されるルーティング リンクを指定するために使用される RouterLink
ディレクティブが適用されています。リンクのいずれかがアクティブになると、RouterLinkActive
ディレクティブの isActive
プロパティにバインドされるため、対応するタブ項目の selected
プロパティが設定されます。このようにして、選択したタブ項目は常に現在の URL パスと同期します。
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { RouterModule } from "@angular/router" ;
import { IgxTabsModule } from "igniteui-angular" ;
import { TabsSample4Module } from "./tabs-sample-4/tabs-sample-4.module" ;
import { TabsSample4Component } from "./tabs-sample-4/components/tabs-sample-4.component" ;
import { View1Component } from "./views/view1/view1.component" ;
import { View2Component } from "./views/view2/view2.component" ;
import { View3Component } from "./views/view3/view3.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsSample4Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxTabsModule,
TabsSample4Module,
RouterModule.forRoot([
{ path : "view1" , component : View1Component },
{ path : "view2" , component : View2Component },
{ path : "view3" , component : View3Component }
])
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit } from '@angular/core' ;
import { NavigationEnd, Router } from '@angular/router' ;
import { filter } from 'rxjs/operators' ;
@Component ({
selector : 'app-tabs-sample-4' ,
styleUrls : ['./tabs-sample-4.component.scss' ],
templateUrl : './tabs-sample-4.component.html'
})
export class TabsSample4Component implements OnInit {
public path: string ;
constructor (private router: Router ) { }
public ngOnInit ( ) {
this .path = this .router.url;
this .router.events.pipe(
filter(e => e instanceof NavigationEnd)
).subscribe(args => this .path = args['url' ]);
}
}
ts コピー <div class ="url" >
<p class ="url__title" > Current URL Path:</p >
<p class ="url__path" > http://localhost:4200{{path}}</p >
</div >
<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 >
html コピー :host {
.url {
padding : 12px ;
&__title {
margin : 0 ;
padding : 0 ;
font-size : 14px ;
font-weight : 600 ;
line-height : 1 ;
}
&__path {
margin : 0 ;
padding : 0 ;
font-size : 13px ;
}
}
::ng-deep p {
margin: 0 ;
padding : 8px ;
}
}
scss コピー
routerLink ディレクティブは、直接 igx-tab-item
ではなく、igx-tab-header
に設定されていることに注意してください。
スタイル設定
タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するテーマ モジュールをインポートする必要があります。
@use "igniteui-angular/theming" as *;
scss
次に、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
);
scss
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
次に、tabs-theme
を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。
タブのコンテンツの一部として使用されるコンポーネントをスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成する必要があります。
最後にコンポーネントのテーマを含めます 。
@include css-vars($dark-tabs );
scss
デモ
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxIconModule,
IgxTabsModule,
IgxCardModule,
IgxAvatarModule,
IgxButtonModule,
IgxRippleModule
} from "igniteui-angular" ;
import { TabsStyleComponent } from "./tabs-style/tabs-style.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
TabsStyleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxIconModule,
IgxTabsModule,
IgxCardModule,
IgxAvatarModule,
IgxButtonModule,
IgxRippleModule
],
providers : [],
entryComponents : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-tabs-style' ,
styleUrls : ['./tabs-style.component.scss' ],
templateUrl : './tabs-style.component.html'
})
export class TabsStyleComponent { }
ts コピー <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 >
html コピー @use '../../variables' as *;
$yellow-color : #F4D45C ;
$black-color : #292826 ;
$dark-palette : palette(
$primary : $black-color ,
$secondary : $yellow-color ,
$surface : #222
);
$dark-tabs : tabs-theme(
$item-text-color : color($dark-palette , "secondary" , 400 ),
$item-background : color($dark-palette , "primary" , 400 ),
$item-hover-background : color($dark-palette , "secondary" , 400 ),
$item-hover-color : color($dark-palette , "primary" , 400 ),
$item-active-color : color($dark-palette , "secondary" , 400 ),
$item-active-icon-color : color($dark-palette , "secondary" , 400 ),
$indicator-color : color($dark-palette , "secondary" , 400 ),
$tab-ripple-color : color($dark-palette , "secondary" , 400 )
);
:host {
@include palette($dark-palette );
igx-tab-content {
padding : 8px ;
}
::ng-deep {
@include css-vars($dark-tabs );
}
}
scss コピー
API リファレンス
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。