Angular 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/banner';
// 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/banner';
// 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>

例

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

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 は常にバナー メッセージの最初に配置されます。

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 } from 'igniteui-angular/banner';
import { slideInLeft, slideOutRight } from 'igniteui-angular/animations'
// 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;
    }
}

高度な例

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>

閉じるオプション ('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-background のみを指定して新しいテーマを作成します。指定された値に基づき、$banner-message-color および $banner-illustration-color は背景とのコントラストが高い黒または白に自動的に設定されます。

$custom-banner-theme: banner-theme(
  $banner-background: #011627,
);

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

:host {
    @include tokens($custom-banner-theme);
}

API リファレンス

• Banner
• IgxBannerActionsDirective
• IgxBannerComponent スタイル

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

• Card
• Icon
• Navbar
• Toast

テーマの依存関係

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

その他のリソース

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

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

• Ignite UI for Angular GitHub (英語)

• Ignite UI for Angular Forums

• Ignite UI for Angular GitHub