Banner

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

Angular Banner の例

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

codesandbox で表示 stackblitz で表示

使用方法

はじめに

Banner コンポーネントを初期化にするには、まず IgxBannerModule を app.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxBannerModule } from 'igniteui-angular';

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

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>

codesandbox で表示 stackblitz で表示

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

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

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

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

// banner.component.ts
import { IgxBannerComponent, slideInLeft, slideOutRight } from 'igniteui-angular'
...
export class MyBannerComponent {
    ...
    public animationSettings = {
        openAnimation: slideInLeft,
        closeAnimation: slideOutRight
    }
    ...
}

codesandbox で表示 stackblitz で表示

イベントにバインド

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

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

<!--banner.component.html-->
    <igx-banner #connectionBanner (onOpening)="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 を追加します。以下はテンプレート化したバナーのデモです。

codesandbox で表示 stackblitz で表示

スタイル設定

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

// in styles.scss
@import '~igniteui-angular/lib/core/styles/themes/index';

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

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

CSS 変数の使用

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

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

ミックスインの使用

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

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

:host {
    ::ng-deep {
        // Pass the custom banner theme to the `igx-banner` mixin
        @include igx-banner($custom-banner-theme);
    }
}

カラー パレットの使用

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

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

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

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

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

$custom-banner-theme: igx-banner-theme(
    $banner-message-color: igx-color($light-banner-palette, "secondary", 400),
    $banner-background: igx-color($light-banner-palette, "primary", 400),
    $banner-illustration-color: igx-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: (
            igx-color: ("secondary", 400)
        ),
        banner-background: (
            igx-color: ("primary", 400)
        ),
        banner-illustration-color: (
            igx-color: ("secondary", 100)
        )
    )
);

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

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

codesandbox で表示 stackblitz で表示

API リファレンス

• IgxBannerComponent
• IgxBannerActionsDirective
• IgxBannerComponent スタイル

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

• IgxCardComponent
• IgxIconComponent
• IgxNavbarComponent
• IgxToastComponent

その他のリソース

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

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