Angular Bottom Navigation (下部のナビゲーション) コンポーネントの概要

Ignite UI for Angular Bottom Navigation コンポーネントは、単一ビューで表示される複数のコンテンツ パネル間での移動を可能にします。パネルの間のナビゲーションはアプリケーションの下部にあるタブ ボタンで実行されます。

igx-tab-bar セレクターは非推奨です。代わりに igx-bottom-nav を使用してください。IgxTabBarComponent クラスは IgxBottomNavComponent に名前変更しました。IgxTabBarModule は IgxBottomNavModule に名前変更しました。

Angular Bottom Navigation の例

EXAMPLE

MODULES

TS

HTML

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 { 
	IgxBottomNavModule,
	IgxIconModule
 } from "igniteui-angular";
import { TabbarSample1Component } from "./tabbar-sample-1/tabbar-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TabbarSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBottomNavModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

@Component({
  selector: 'app-tabbar-sample-1',
  styleUrls: ['./tabbar-sample-1.component.scss'],
  templateUrl: './tabbar-sample-1.component.html'
})
export class TabbarSample1Component {

  constructor() { }

}
tsコピー

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>library_music</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>video_library</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>library_books</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
</igx-bottom-nav>
htmlコピー

igx-bottom-nav-content {
    padding: 10px;
}
scssコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

ng add igniteui-angular
cmd

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

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

// app.module.ts

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

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

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

// home.component.ts

import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-bottom-nav>
        <igx-bottom-nav-item>
            <igx-bottom-nav-header>
                <igx-icon>library_music</igx-icon>
            </igx-bottom-nav-header>
            <igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
        </igx-bottom-nav-item>
        <igx-bottom-nav-item>
            <igx-bottom-nav-header>
                <igx-icon>video_library</igx-icon>
            </igx-bottom-nav-header>
            <igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
        </igx-bottom-nav-item>
        <igx-bottom-nav-item>
            <igx-bottom-nav-header>
                <igx-icon>library_books</igx-icon>
            </igx-bottom-nav-header>
            <igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
        </igx-bottom-nav-item>
    </igx-bottom-nav>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BOTTOM_NAV_DIRECTIVES, IgxIconComponent]
    /* or imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxIconComponent] */
})
export class HomeComponent {}
typescript

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

Angular Bottom Navigation の使用

コンポーネントのテンプレートには、Bottom Navigation と 3 つの項目が含まれています。各項目は、データのヘッダーとコンテナをそれぞれ表す igx-bottom-nav-header コンポーネントと igx-bottom-nav-content コンポーネントをラップします。ヘッダーは通常、アイコンとオプションのテキスト ラベルで構成されます。Bottom Navigation コントロールはマテリアル デザインアイコンと互換性があるため、アプリケーションに採用するには、メイン アプリケーション フォルダーの 'styles.css' ファイルに Material+Icons インポートを追加するだけです。

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

// styles.css

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

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>library_music</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 1 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>video_library</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 2 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon>library_books</igx-icon>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>This is Item 3 content.</igx-bottom-nav-content>
    </igx-bottom-nav-item>
</igx-bottom-nav>
html

すべて適切に設定できると、ブラウザ上でデモサンプルを確認することができます。

Bottom Navigation のカスタマイズ

アイコンの横にラベルを追加してタブを変更し、ヘッダーのスタイルが適切であることを確認しましょう。

まず、コンポーネントの typescript ファイルにデータ ソースのオブジェクト配列を定義します。

public songsList: object[] = [
    { title: 'Havana', artist: 'Camila Cabello' },
    { title: 'Meant To Be', artist: 'Bebe Rexha & Florida Georgia Line' },
    { title: 'New Rules', artist: 'Dua Lipa' },
    { title: 'Wolves', artist: 'Selena Gomez & Marshmello' }
];

public moviesList: object[] = [
    { title: 'Logan', genre: 'Action, Drama, Sci-Fi' },
    { title: 'Wonder Woman', genre: 'Action, Adventure, Fantasy' },
    { title: 'Guardians of the Galaxy Vol. 2', genre: 'Action, Adventure, Sci-Fi' },
    { title: 'Star Wars: The Last Jedi', genre: 'Action, Adventure, Fantasy' }
];

public booksList: object[] = [
    { title: 'Wonder', author: 'R. J. Palacio' },
    { title: 'Milk and Honey', author: 'Rupi Kaur' },
    { title: 'Giraffes Can\'t Dance', author: 'Jeff Kinne' },
    { title: 'The Getaway', author: 'Selena Gomez & Marshmello' }
];
typescript

次に、コンポーネントのテンプレート マークアップを次のように更新します。

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
            <span igxBottomNavHeaderLabel>Songs</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let song of songsList">
                <span class="item-line1">{{song.title}}</span><br/>
                <span class="item-line2">{{song.artist}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
            <span igxBottomNavHeaderLabel>Movies</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let movie of moviesList">
                <span class="item-line1">{{movie.title}}</span><br/>
                <span class="item-line2">{{movie.genre}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
            <span igxBottomNavHeaderLabel>Books</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let book of booksList">
                <span class="item-line1">{{book.title}}</span><br/>
                <span class="item-line2">{{book.author}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
</igx-bottom-nav>
html

項目のヘッダー タグの間にアイコンとラベル付きのスパンを配置することに加えて、igxBottomNavHeaderIcon および igxBottomNavHeaderLabel ディレクティブもそれらに添付していることに気付いたと思います。これらのディレクティブはそれぞれの要素を示し、適切なスタイルを適用します。

最後に、コンテンツのテンプレートの DIV および SPAN 要素に使用される CSS クラスをコンポーネントの CSS ファイルに追加します。

.item {
    margin-bottom: 5px;
}

.item-line1 {
    font-size: 14px;
    color: gray;
}

.item-line2 {
    font-size: 12px;
    color: darkgray;
}

igx-bottom-nav-content {
    padding: 10px;
}
css

Bottom Navigation は以下のようになります。

EXAMPLE

MODULES

TS

HTML

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 { 
	IgxBottomNavModule,
	IgxIconModule
 } from "igniteui-angular";
import { TabbarSample2Component } from "./tabbar-sample-2/tabbar-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TabbarSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBottomNavModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

/* eslint-disable @typescript-eslint/quotes */
import { Component } from "@angular/core";

@Component({
  selector: "app-tabbar-sample-2",
  styleUrls: ["./tabbar-sample-2.component.scss"],
  templateUrl: "./tabbar-sample-2.component.html"
})
export class TabbarSample2Component {

  public songsList = [
    { title: "Havana", artist: "Camila Cabello" },
    { title: "Meant To Be", artist: "Bebe Rexha & Florida Georgia Line" },
    { title: "New Rules", artist: "Dua Lipa" },
    { title: "Wolves", artist: "Selena Gomez & Marshmello" }
  ];

  public moviesList = [
    { title: "Logan", genre: "Action, Drama, Sci-Fi" },
    { title: "Wonder Woman", genre: "Action, Adventure, Fantasy" },
    { title: "Guardians of the Galaxy Vol. 2", genre: "Action, Adventure, Sci-Fi" },
    { title: "Star Wars: The Last Jedi", genre: "Action, Adventure, Fantasy" }
  ];

  public booksList = [
    { title: "Wonder", author: "R. J. Palacio" },
    { title: "Milk and Honey", author: "Rupi Kaur" },
    { title: "Giraffes Can't Dance", author: "Jeff Kinne" },
    { title: "The Getaway", author: "Selena Gomez & Marshmello" }
  ];

  constructor() { }

}
tsコピー

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
            <span igxBottomNavHeaderLabel>Songs</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let song of songsList">
            <span class="item-line1">{{song.title}}</span><br/>
            <span class="item-line2">{{song.artist}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
            <span igxBottomNavHeaderLabel>Movies</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let movie of moviesList">
            <span class="item-line1">{{movie.title}}</span><br/>
            <span class="item-line2">{{movie.genre}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
            <span igxBottomNavHeaderLabel>Books</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let book of booksList">
            <span class="item-line1">{{book.title}}</span><br/>
            <span class="item-line2">{{book.author}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
</igx-bottom-nav>
htmlコピー

.item {
    margin-bottom: 5px;
}

.item-line1 {
    font-size: 14px;
    color: gray;
}

.item-line2 {
    font-size: 12px;
    color: darkgray;
}

igx-bottom-nav-content {
    padding: 10px;
}
scssコピー

Edit in: CodesandboxStackBlitz

ヘッダーにラベルとアイコンを含めるだけでは不十分な場合は、ヘッダー タグの間にカスタム コンテンツを追加するだけです。 以下はその例です。

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
            <span igxBottomNavHeaderLabel>Movies</span>
            <div>
                <!-- your custom tab header content goes here -->
            </div>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <h1>Tab content</h1>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
</igx-bottom-nav>
html

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

Bottom Navigation コンポーネントの主な用途はコンテンツを含むタブ項目を定義することですが、ヘッダーのみを使用してタブ項目を定義する必要がある場合があります。おそらく、そのような使用法の主なシナリオは、Angular Router を使用したビュー間のナビゲーションです。次の例は、Bottom Navigation コンポーネントを構成して、単一のルーターアウトレットで 3 つのコンポーネントを切り替える方法を示しています。

まず、Bottom Navigation コンポーネントをホストするメインコンポーネントと、デモ用のコンテンツを含む 3 つのビュー コンポーネントが必要です。コード スニペットを簡素化するために、ビュー コンポーネントに短いテンプレートがありますが、必要に応じてそれらをより識別しやすくしてください。また、これらのビューコンポーネントを app.module.ts ファイルにインポートします。

// bottomnav-routing.component.ts
import { Component } from '@angular/core';

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

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

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

@Component({
    template: '<p>Item 3 Content</p>'
})
export class BottomNavRoutingView3Component { }
typescript

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

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

import {
    TabbarRoutingComponent,
    TabbarRoutingView1Component,
    TabbarRoutingView2Component,
    TabbarRoutingView3Component,
} from './tabbar-routing.component';

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: '/tabbar-routing'
    },
    {
        path: 'tabbar-routing',
        component: TabbarRoutingComponent,
        children: [
            { path: 'tabbar-view1', component: TabbarView1Component },
            { path: 'tabbar-view2', component: TabbarView2Component },
            { path: 'tabbar-view3', component: TabbarView3Component }
        ]
    }
];

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

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

<!-- bottomnav-routing.component.html -->
<router-outlet></router-outlet>

<igx-bottom-nav #tabs1>
    <igx-bottom-nav-item
        routerLinkActive
        #rla1="routerLinkActive"
        [selected]="rla1.isActive"
        >
        <igx-bottom-nav-header routerLink="tabbar-view1">
            <igx-icon igxBottomNavHeaderIcon>phone</igx-icon>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item
        routerLinkActive
        #rla2="routerLinkActive"
        [selected]="rla2.isActive"
    >
        <igx-bottom-nav-header routerLink="tabbar-view2">
            <igx-icon igxBottomNavHeaderIcon>supervisor_account</igx-icon>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item
        routerLinkActive
        #rla3="routerLinkActive"
        [selected]="rla3.isActive"
    >
        <igx-bottom-nav-header routerLink="tabbar-view3">
            <igx-icon igxBottomNavHeaderIcon>format_list_bulleted</igx-icon>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
</igx-bottom-nav>
html

上記のコードは、3 つのタブ項目を持つ BottomNavigation コンポーネントを作成します。すべてのタブ項目には、リンクされたルートが現在アクティブであるかどうかを追跡する RouterLinkActive ディレクティブが適用されています。RouterLink ディレクティブは、タブ項目ではなく、ヘッダー要素自体に適用されることに注意してください。これらのリンクのいずれかがアクティブになると、RouterLinkActive ディレクティブの isActive プロパティにバインドされるため、対応するタブ項目の selected プロパティが設定されます。このようにして、選択したタブ項目は常に現在のブラウザーのアドレスと同期したままになります。

上記のアプローチは、BottomNavigation コンポーネントを使用したルーティングを示すために、次のサンプルで使用されています。

EXAMPLE

MODULES

TS

HTML

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 { TabbarSample3Module } from "./tabbar-sample-3/tabbar-sample-3.module";
import { TabbarSample3Component } from "./tabbar-sample-3/components/tabbar-sample-3.component";
import { 
	IgxBottomNavModule,
	IgxIconModule
 } from "igniteui-angular";
import { RouterModule } from "@angular/router";
import { TabbarView1Component } from "./views/view1/view1.component";
import { TabbarView2Component } from "./views/view2/view2.component";
import { TabbarView3Component } from "./views/view3/view3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TabbarSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBottomNavModule,
	IgxIconModule,
	TabbarSample3Module,
	RouterModule.forRoot([
                        { path: "tabbar-view1", component: TabbarView1Component },
                        { path: "tabbar-view2", component: TabbarView2Component },
                        { path: "tabbar-view3", component: TabbarView3Component }
                    ])
],
  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-tabbar-sample-3',
    styleUrls: ['./tabbar-sample-3.component.scss'],
    templateUrl: './tabbar-sample-3.component.html'
})
export class TabbarSample3Component 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>

<router-outlet></router-outlet>

<igx-bottom-nav #tabs1>
    <igx-bottom-nav-item
        routerLinkActive
        #rla1="routerLinkActive"
        [selected]="rla1.isActive"
        >
        <igx-bottom-nav-header routerLink="tabbar-view1">
            <igx-icon igxBottomNavHeaderIcon>phone</igx-icon>
        </igx-bottom-nav-header></igx-bottom-nav-item>
    <igx-bottom-nav-item
        routerLinkActive
        #rla2="routerLinkActive"
        [selected]="rla2.isActive"
    >
        <igx-bottom-nav-header routerLink="tabbar-view2">
            <igx-icon igxBottomNavHeaderIcon>supervisor_account</igx-icon>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item
        routerLinkActive
        #rla3="routerLinkActive"
        [selected]="rla3.isActive"
    >
        <igx-bottom-nav-header routerLink="tabbar-view3">
            <igx-icon igxBottomNavHeaderIcon>format_list_bulleted</igx-icon>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
</igx-bottom-nav>
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: 12px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

スタイル設定

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

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

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

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

$dark-bottom-nav: bottom-nav-theme(
  $background: #292826,
  $icon-selected-color: #f4d45c
);
scss

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

bottom-nav-theme は、tabs コンポーネントのスタイル設定で多くのパラメーターが利用できます。

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

最後にコンポーネントのテーマをアプリケーションに含めます。

@include css-vars($dark-bottom-nav);
scss

デモ

EXAMPLE

MODULES

TS

HTML

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 { 
	IgxBottomNavModule,
	IgxIconModule
 } from "igniteui-angular";
import { TabbarStyleComponent } from "./tabbar-style/tabbar-style.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TabbarStyleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBottomNavModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

/* eslint-disable @typescript-eslint/quotes */
import { Component, OnInit } from "@angular/core";

@Component({
    selector: "app-tabbar-style",
    styleUrls: ["./tabbar-style.component.scss"],
    templateUrl: "./tabbar-style.component.html"
})
export class TabbarStyleComponent {
    public songsList = [
        { title: "Havana", artist: "Camila Cabello" },
        { title: "Meant To Be", artist: "Bebe Rexha & Florida Georgia Line" },
        { title: "New Rules", artist: "Dua Lipa" },
        { title: "Wolves", artist: "Selena Gomez & Marshmello" }
        ];

    public moviesList = [
    { title: "Logan", genre: "Action, Drama, Sci-Fi" },
    { title: "Wonder Woman", genre: "Action, Adventure, Fantasy" },
    { title: "Guardians of the Galaxy Vol. 2", genre: "Action, Adventure, Sci-Fi" },
    { title: "Star Wars: The Last Jedi", genre: "Action, Adventure, Fantasy" }
    ];

    public booksList = [
    { title: "Wonder", author: "R. J. Palacio" },
    { title: "Milk and Honey", author: "Rupi Kaur" },
    { title: "Giraffes Can't Dance", author: "Jeff Kinne" },
    { title: "The Getaway", author: "Selena Gomez & Marshmello" }
    ];

    constructor() { }
}
tsコピー

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
            <span igxBottomNavHeaderLabel>Songs</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let song of songsList">
                <span class="item-line1">{{song.title}}</span><br/>
                <span class="item-line2">{{song.artist}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>video_library</igx-icon>
            <span igxBottomNavHeaderLabel>Movies</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let movie of moviesList">
                <span class="item-line1">{{movie.title}}</span><br/>
                <span class="item-line2">{{movie.genre}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>library_books</igx-icon>
            <span igxBottomNavHeaderLabel>Books</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            <div class="item" *ngFor="let book of booksList">
                <span class="item-line1">{{book.title}}</span><br/>
                <span class="item-line2">{{book.author}}</span>
            </div>
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
  </igx-bottom-nav>
htmlコピー

@use '../../variables' as *;

igx-bottom-nav-content {
    padding: 10px;
}

.item {
    margin-bottom: 5px;
}

.item-line1 {
    font-size: 14px;
    color: gray;
}

.item-line2 {
    font-size: 12px;
    color: darkgray;
}

igx-bottom-nav-content {
    padding: 10px;
}

$dark-bottom-nav: bottom-nav-theme(
    $background: #292826,
    $active-item-color: #F4D45C
);

// :host {
//     @include css-vars($dark-bottom-nav);
// }

/* Using Theme Overrides to provide IE 11 support.
 * NOTE: Theming using this approach will greatly increase the size
 * of the output CSS. If you do not plan to target IE 11,
 * delete this section and use the `igx-css-vars` mixin as shown above.
**/
:host ::ng-deep {
   @include bottom-nav($dark-bottom-nav);
}
scssコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxBottomNavComponent
• IgxBottomNavComponent スタイル
• IgxIconComponent

テーマの依存関係

• IgxIcon テーマ
• IgxRipple テーマ

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)