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

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

Angular Banner の例

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

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

ng add igniteui-angular

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 {}

あるいは、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 {}

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

Angular Banner コンポーネントの使用

Banner の表示

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

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

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

Note

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

例

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

Banner メッセージの変更

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

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

アイコンの追加

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

Note

複数の 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>

バナー メッセージで 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>

バナー ボタンの変更

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>

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

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

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

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

// 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
    }
    ...
}

イベントにバインド

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>

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

Note

上記が適用されるとオープニング イベントが常にキャンセルされるため、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>

Note

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>

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

スタイル設定

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

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

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

最も簡単な方法は、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
);

CSS 変数の使用

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

@include css-vars($custom-banner-theme);

ミックスインの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Custom banner theme を `igx-banner` ミックスインに渡します
        @include banner($custom-banner-theme);
    }
}

カラー パレットの使用

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

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

$white-color: #dedede;
$black-color: #151515;

$light-banner-palette: palette($primary: $white-color, $secondary: $black-color);

次に igx-color を使用してパレットから簡単に色を取得できます。

$custom-banner-theme: banner-theme(
    $banner-message-color: color($light-banner-palette, "secondary", 400),
    $banner-background: color($light-banner-palette, "primary", 400),
    $banner-illustration-color: color($light-banner-palette, "secondary", 100)
);

Note

igx-color と igx-palette は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。

スキーマの使用

テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。 すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは light-banner) の 1 つを拡張します。

//  Extending the banner schema
$light-toast-schema: extend($_light-toast,
    (
        banner-message-color: (
           color: ("secondary", 400)
        ),
        banner-background: (
           color: ("primary", 400)
        ),
        banner-illustration-color: (
           color: ("secondary", 100)
        )
    )
);

// Defining banner with the global light schema
$custom-banner-theme: banner-theme(
  $palette: $light-banner-palette,
  $schema: $light-toast-schema
);

上記と同じ方法でテーマを含める必要があることに注意してください。

API リファレンス

• IgxBannerComponent
• IgxBannerActionsDirective
• IgxBannerComponent スタイル

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

• IgxCardComponent
• IgxIconComponent
• IgxNavbarComponent
• IgxToastComponent

テーマの依存関係

• IgxIcon テーマ
• IgxButton テーマ
• IgxRipple テーマ
• IgxExpansionPanel テーマ

その他のリソース

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

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