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 リファレンス
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。