Angular Banner コンポーネント

Components List

Angular Banner コンポーネントは、スナックバーより長い時間の表示でダイアログより控えめのメッセージを簡単に表示できます。Banner にカスタム動作ボタンやアイコンの表示を設定できます。

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 { 
	IgxBannerModule,
	IgxNavbarModule,
	IgxCardModule,
	IgxIconModule
 } from "igniteui-angular";
import { BannerSample1Component } from "./banner-sample-1/banner-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	BannerSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBannerModule,
	IgxCardModule,
	IgxIconModule,
	IgxNavbarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxBannerComponent } from 'igniteui-angular';

@Component({
    selector: 'app-banner-sample-1',
    styleUrls: ['../banner-samples.scss'],
    templateUrl: 'banner-sample-1.component.html'
})

export class BannerSample1Component implements OnInit {
    @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent;
    public contentWidth = '384px';
    public imageUrls = ['https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg',
        'https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg'];
    public ngOnInit() {
        this.banner.open();
    }
}
ts

<div class="gallery__wrapper">
    <div class="gallery__content">
        <igx-navbar title="Gallery">
            <igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
        </igx-navbar>
        <igx-banner class="offline-banner" #connectionBanner>
            You are currently offline.
        </igx-banner>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[0]">
            </div>
        </igx-card>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[1]">
            </div>
        </igx-card>
    </div>
</div>
html

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

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

ng add igniteui-angular
cmd

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

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

// app.module.ts

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

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

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

// home.component.ts

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

@Component({
    selector: 'app-home',
    template: `
    <igx-banner>
        You are currently offline.
    </igx-banner>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BANNER_DIRECTIVES]
    /* or imports: [IgxBannerComponent] */
})
export class HomeComponent {}
typescript

Ignite UI for Angular Banner モジュールまたはディレクティブをインポートしたので、igx-banner コンポーネントの基本構成を開始できます。

Banner コンポーネントを表示するには、ボタンクリックで open() 呼び出します。バナーは、要素がページテンプレートに挿入された場所にその他すべてのコンテンツを移動して表示されます。通常、閉じるためのユーザー操作をほとんど必要としない非侵入型コンテンツを表示します。

<!--banner.component.html-->

<igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
...
<igx-banner #connectionBanner>
    You are currently offline.
</igx-banner>

html

IgxBannerModule には、バナーを閉じるデフォルトの Dismiss バナーボタンが含まれています。

例

IgxBannerComponent は、マテリアルデザインバナーガイドラインにできるかぎり準拠しながらコンテンツをテンプレート化します。

igx-banner タグに渡されるコンテンツを変更することによりバナーに表示されるメッセージを設定できます。指定したバナー領域にテキストが表示され、表示時にバナーはデフォルトテンプレートを使用します。以下は、サンプルバナーのコンテンツを変更してより多くの情報を提供します。

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
</igx-banner>
html

アイコンの追加

igx-icon は、バナーのコンテンツに渡すことでバナーに表示できます。Icon は常にバナーメッセージの最初に配置されます。

複数の igx-icon 要素がバナーの直接の子孫として挿入される場合、バナーはそれらすべてを最初に配置しようとします。igx-icon は 1 つのみ、直接渡すことに注意してください。

igx-icon をバナーに渡すには、それをバナーのコンテンツに挿入します。

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
</igx-banner>
html

バナーメッセージで igx-icon を使用する場合、span タグでラップしてください。

<!--banner.component.html-->
<igx-banner #connectionBanner>
    You have lost connection to the internet. This app is offline.
    <span>
        <igx-icon>signal_wifi_off</igx-icon>
    </span>
</igx-banner>
html

バナーボタンの変更

IgxBannerModule は、バナーボタンをテンプレート化するための IgxBannerActionsDirective ディレクティブを公開します。このディレクティブはデフォルトバナーボタン (Dismiss) をオーバーライドし、ユーザー定義のカスタム操作を追加します。

<!--banner.component.html-->
<igx-banner #connectionBanner>
    <igx-icon>signal_wifi_off</igx-icon>
    You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button>
    </igx-banner-actions>
</igx-banner>
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 { 
	IgxBannerModule,
	IgxNavbarModule,
	IgxCardModule,
	IgxToastModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
 } from "igniteui-angular";
import { BannerSample2Component } from "./banner-sample-2/banner-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	BannerSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBannerModule,
	IgxCardModule,
	IgxNavbarModule,
	IgxToastModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxBannerComponent } from 'igniteui-angular';

@Component({
    selector: 'app-banner-sample-2',
    styleUrls: ['../banner-samples.scss'],
    templateUrl: 'banner-sample-2.component.html'
})

export class BannerSample2Component implements OnInit {
    @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent;
    public contentWidth = '384px';
    public imageUrls = ['https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg',
        'https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg'];

    public ngOnInit() {
        this.banner.open();
    }
}
ts

<div class="gallery__wrapper">
    <div class="gallery__content">
        <igx-navbar title="Gallery">
            <igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
        </igx-navbar>
        <igx-banner class="offline-banner" #connectionBanner>
            <igx-icon>signal_wifi_off</igx-icon>
            You have lost connection to the internet. This app is offline.
            <igx-banner-actions>
                <button igxButton igxRipple (click)="connectionBanner.toggle()">Toggle Banner</button>
            </igx-banner-actions>
        </igx-banner>

        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[0]">
            </div>
        </igx-card>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[1]">
            </div>
        </igx-card>
    </div>
</div>
html

カスタムアニメーションの適用

Banner コンポーネントには、アニメーションのオープンとクローズのカスタム設定を適用できる animationSettings プロパティがあります。開発者は、自分で定義したアニメーションと、アニメーションスイートのアニメーションから選択できます。バナーで使用されるデフォルトアニメーションは、growVerIn が開始、growVerOut が終了です。

スライドインまたはスライドアウトするためにバナーが使用するアニメーションを変更します。

<!--banner.component.html-->
<igx-banner #connectionBanner [animationSettings]="animationSettings">
    ...
</igx-banner>
html

// banner.component.ts
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
// import { IgxBannerComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyBannerComponent {
    ...
    public animationSettings = {
        openAnimation: slideInLeft,
        closeAnimation: slideOutRight
    }
    ...
}
typescript

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 { 
	IgxBannerModule,
	IgxCardModule,
	IgxToastModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
 } from "igniteui-angular";
import { BannerSample3Component } from "./banner-sample-3/banner-sample-3.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	BannerSample3Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBannerModule,
	IgxCardModule,
	IgxToastModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular';

@Component({
    selector: 'app-banner-sample-3',
    styleUrls: ['../banner-samples.scss'],
    templateUrl: 'banner-sample-3.component.html'
})

export class BannerSample3Component implements OnInit {
    @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent;
    public contentWidth = '384px';
    public imageUrls = ['https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg',
        'https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg'];
    public animationSettings = {
        closeAnimation: slideOutRight,
        openAnimation: slideInLeft
    };

    public ngOnInit() {
        this.banner.open();
    }
}
ts

<div class="gallery__wrapper">
    <div class="gallery__content">
        <igx-navbar title="Gallery">
            <igx-icon (click)="connectionBanner.open()">refresh</igx-icon>
        </igx-navbar>
        <igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
            <igx-icon>signal_wifi_off</igx-icon>
            You have lost connection to the internet. This app is offline.
            <igx-banner-actions>
                    <button igxButton igxRipple (click)="connectionBanner.close()">Close</button>
            </igx-banner-actions>
        </igx-banner>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[0]">
            </div>
        </igx-card>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[1]">
            </div>
        </igx-card>
    </div>
</div>
html

イベントにバインド

Banner コンポーネントは状態の変更時にイベントを発生します。opening と opened が Banner が表示される (前と後に) ときに呼び出されます。一方、closing と closed は Banner が閉じるときにエミットされます。ing イベント (opening、closing) はキャンセル可能です。ICancelEventArgs インターフェイスを使用してオブジェクトは cancel プロパティを持ちます。cancel プロパティを true に設定します。対応するエンド操作とイベントはトリガーされません。たとえば、opening をキャンセルした場合、Banner の open メソッドは完了せずに Banner が表示されません。

発生したオブジェクトへバインドしたイベントをキャンセルするために cancel プロパティに true に設定します。

<!--banner.component.html-->
    <igx-banner #connectionBanner (opening)="handleOpen($event)">
        ...
    </igx-banner>
html

// banner.component.ts
...
export class MyBannerComponent {
    ...
    public handleOpen(event) {
        event.cancel = true;
    }
}
typescript

上記が適用されるとオープニングイベントが常にキャンセルされるため、Banner が開くことはありません。

高度な例

2 つのカスタムボタンのバナーを作成しましょう。1 つは通知を閉じるためのボタンで、もう 1 つは接続をオンにするためのボタンです。igx-banner-actions セレクターを使用してカスタム動作ハンドラーを渡すことができます。

<!--banner.component.html-->
<igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
    <igx-icon>signal_wifi_off</igx-icon>
        You have lost connection to the internet. This app is offline.
    <igx-banner-actions>
        <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
        <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
    </igx-banner-actions>
</igx-banner>
html

Google の マテリアルデザイン ガイドラインでは、バナーに表示するボタンは 2 つまでです。IgxBannerComponent は、igx-banner-actions タグの要素数を明示的に制限しませんが、マテリアルデザインガイドに従う場合は、最大 2 つの要素を使用することを強くお勧めします。

閉じるオプション ('Continue Offline') は詳細なロジックを必要としないため、close() のみの呼び出しが可能です。しかし、確認操作 ('Turn On Wifi') は追加のロジックを必要とするため、コンポーネントで定義する必要があります。次に、onNetworkStateChange 監視可能な値を作成してサブスクライブします。最後に、変更するたびに refreshBanner メソッドを呼び出します。これにより、wifiState に基づいてバナーを切り替えます。

バナーのナビゲーションバーに WiFi アイコンが表示されます。wifiState が変更されるとサブスクリプションが発生するため、アイコンはバナーを切り替えるだけでなく、接続の状態に基づいて変化します。

<!--banner.component.html-->
<igx-navbar title="Gallery">
    <igx-icon (click)="wifiState = !wifiState">
        {{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}
    </igx-icon>
</igx-navbar>
html

最後に、WiFi の状態に関するメッセージを表示する toast を追加します。以下はテンプレート化したバナーのデモです。

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 { 
	IgxBannerModule,
	IgxNavbarModule,
	IgxCardModule,
	IgxIconModule,
	IgxToastModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { BannerAdvancedSampleComponent } from "./banner-advanced-sample/banner-advanced-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	BannerAdvancedSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBannerModule,
	IgxCardModule,
	IgxIconModule,
	IgxNavbarModule,
	IgxToastModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { IgxBannerComponent, IgxToastComponent, VerticalAlignment } from 'igniteui-angular';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-banner-advanced-sample',
    styleUrls: ['../banner-samples.scss'],
    templateUrl: 'banner-advanced-sample.component.html'
})

export class BannerAdvancedSampleComponent implements OnInit, OnDestroy {

    @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent;
    @ViewChild(IgxToastComponent, { static: true }) public eventToast: IgxToastComponent;
    public contentWidth = '384px';
    public imageUrls = ['https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg',
        'https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg'];
    public onNetworkStateChange = new Subject();

    private _wifiState = false;
    public get wifiState(): boolean {
        return this._wifiState;
    }
    public set wifiState(v: boolean) {
        this._wifiState = v;
        this.onNetworkStateChange.next();
    }

    public showToast() {
        this.eventToast.close();
        this.eventToast.positionSettings.verticalDirection = VerticalAlignment.Middle;
        this.eventToast.open(`Wifi is now ${this.wifiState ? 'on' : 'off'}`);
    }

    public ngOnInit() {
        this.banner.open();
        this.onNetworkStateChange.subscribe(() => this.refreshBanner());
    }

    public ngOnDestroy(): void {
        this.onNetworkStateChange.complete();
    }

    public refreshBanner() {
        if (!this.wifiState) {
            this.banner.open();
        } else {
            if (!this.banner.collapsed) {
                this.banner.close();
            }
        }
        this.showToast();
    }
}
ts

<div class="gallery__wrapper">
    <div class="gallery__content">
        <igx-navbar title="Gallery">
            <igx-icon (click)="wifiState = !wifiState">{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off' }}</igx-icon>
        </igx-navbar>
        <igx-banner class="offline-banner" #connectionBanner>
            <igx-icon>signal_wifi_off</igx-icon>
            You have lost connection to the internet. This app is offline.
            <igx-banner-actions>
                <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
                <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
            </igx-banner-actions>
        </igx-banner>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[0]">
            </div>
        </igx-card>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[1]">
            </div>
        </igx-card>
        <igx-toast #eventToast></igx-toast>
    </div>
</div>
html

スタイル設定

はじめに、テーマエンジンによって公開されている関数を使用するために、スタイルファイルに index ファイルをインポートする必要があります。

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

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

最も簡単な方法は、banner-theme を拡張する新しいテーマを作成し、$banner-message-color、$banner-background と $banner-illustration-color パラメーターを受け取る方法です。

$custom-banner-theme: banner-theme(
  $banner-message-color: #151515,
  $banner-background: #dedede,
  $banner-illustration-color: #666666
);
scss

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

最後にバナーのカスタムテーマを渡します。

@include css-vars($custom-banner-theme);
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 { 
	IgxBannerModule,
	IgxCardModule,
	IgxToastModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule,
	IgxButtonModule,
	IgxRippleModule
 } from "igniteui-angular";
import { BannerStylingComponent } from "./banner-styling/banner-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	BannerStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxBannerModule,
	IgxCardModule,
	IgxToastModule,
	IgxNavbarModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule,
	IgxButtonModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { IgxBannerComponent, IgxToastComponent, slideInLeft, slideOutRight, VerticalAlignment } from 'igniteui-angular';
import { Subject } from 'rxjs';

@Component({
    selector: 'app-banner-styling',
    styleUrls: ['banner-styling.component.scss', '../banner-samples.scss'],
    templateUrl: 'banner-styling.component.html'
})

export class BannerStylingComponent implements OnInit, OnDestroy {
    @ViewChild(IgxBannerComponent, { static: true }) public banner: IgxBannerComponent;
    @ViewChild(IgxToastComponent, { static: true }) public eventToast: IgxToastComponent;
    public contentWidth = '384px';
    public imageUrls = ['https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg',
        'https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg'];
    public animationSettings = {
        closeAnimation: slideOutRight,
        openAnimation: slideInLeft
    };
    public onNetworkStateChange = new Subject();
    private _wifiState = false;

    public get wifiState(): boolean {
        return this._wifiState;
    }
    public set wifiState(v: boolean) {
        this._wifiState = v;
        this.onNetworkStateChange.next();
    }

    public showToast() {
        this.eventToast.close();
        this.eventToast.positionSettings.verticalDirection = VerticalAlignment.Middle;
        this.eventToast.open(`Wifi is now ${this.wifiState ? 'on' : 'off'}`);
    }

    public ngOnInit() {
        this.banner.open();
        this.onNetworkStateChange.subscribe(() => this.refreshBanner());
    }

    public ngOnDestroy(): void {
        this.onNetworkStateChange.complete();
    }

    public refreshBanner() {
        if (!this.wifiState) {
            this.banner.open();
        } else {
            this.banner.close();
        }
        this.showToast();
    }
}
ts

<div class="gallery__wrapper">
    <div class="gallery__content">
        <igx-navbar title="Gallery">
            <igx-icon (click)="wifiState = !wifiState">{{ wifiState ? 'signal_wifi_4_bar' : 'signal_wifi_off'}}
            </igx-icon>
        </igx-navbar>
        <igx-banner class="offline-banner" #connectionBanner [animationSettings]="animationSettings">
            <igx-icon>signal_wifi_off</igx-icon>
            You have lost connection to the internet. This app is offline.
            <igx-banner-actions>
                <button igxButton igxRipple (click)="connectionBanner.close()">Continue Offline</button>
                <button igxButton igxRipple (click)="wifiState = true">Turn On Wifi</button>
            </igx-banner-actions>
        </igx-banner>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[0]">
            </div>
        </igx-card>
        <igx-card class="gallery__item">
            <div>
                <img [src]="imageUrls[1]">
            </div>
        </igx-card>
        <igx-toast #eventToast></igx-toast>
    </div>
</div>
html

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

$custom-banner-theme: banner-theme(
    $banner-message-color: #151515,
    $banner-background: #dedede,
    $banner-illustration-color: #666666
);

:host {
    @include css-vars($custom-banner-theme);
}
scss

API リファレンス

その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:

テーマの依存関係

その他のリソース

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

Angular Banner (バナー) コンポーネントの概要

Angular Banner の例

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