React Banner (バナー) の概要

Ignite UI for React Banner コンポーネントは、スナックバーより長い時間の表示でダイアログより控えめのメッセージを簡単に表示できます。また、メッセージのコンテキストに基づいて実行するアクションを示すこともできます。

Ignite UI for React Banner の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrBanner とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrBannerModule, IgrBanner } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrBannerModule.register();

Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。

Banner の表示

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

<IgrButton clicked={() => bannerRef.current.show()}>
    <span>Show Banner</span>
</IgrButton>

<IgrBanner ref={bannerRef}>
    <span key="message">You are currently offline.</span>
</IgrBanner>

[!NOTE] IgrBanner には、バナーを閉じるデフォルトの OK アクション ボタンが含まれています。

例

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

バナー メッセージの変更

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

<IgrBanner ref={bannerRef}>
    <span key="message">You have lost connection to the internet. This app is offline.</span>
</IgrBanner>

アイコンの追加

バナーの prefix スロットを使用して、IgrIcon をバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。

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

IgrIcon をバナーに渡すには、prefix スロットを使用します。

<IgrBanner ref={bannerRef}>
    <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span key="message">You have lost connection to the internet. This app is offline.</span>
</IgrBanner>

バナー メッセージで IgrIcon を使用したい場合は、バナーのコンテンツに挿入するだけです。

<IgrBanner ref={bannerRef}>
    <span key="message">You have lost connection to the internet. This app is offline.</span>
    <IgrIcon key="icon" name="signal_wifi_off"></IgrIcon>
</IgrBanner>

バナー ボタンの変更

IgrBanner は、バナー ボタンをテンプレート化するための actions スロットを公開します。これにより、デフォルトのバナー ボタン (OK) をオーバーライドし、ユーザー定義のカスタム操作を追加します。

<IgrBanner ref={bannerRef}>
    <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span key="message">You have lost connection to the internet. This app is offline.</span>
    <div key="actions" slot="actions">
        <IgrButton key="button" variant="flat" clicked={() => bannerRef.current.toggle()}>
            <IgrRipple key="ripple" />
            <span key="action-text">Toggle Banner</span>
        </IgrButton>
    </div>
</IgrBanner>

イベントにバインド

バナー コンポーネントは、閉じられるときに igcClosing イベントと igcClosed イベントを発行します。igcClosing イベントはキャンセル可能です。CustomEvent インターフェイスを使用し、発行されたオブジェクトの cancelable プロパティは true に設定されています。igcClosing イベントをキャンセルすると、対応する終了アクションとイベントはトリガーされません。バナーは閉じられず、igcClosed イベントも発行されません。

終了イベントをキャンセルするには、preventDefault メソッドを呼び出します。

<IgrBanner ref={bannerRef}>
    ...
</IgrBanner>

const bannerRef = useRef<IgrBanner>(null);

useEffect(() => {
    bannerRef.current.nativeElement.addEventListener('igcClosing', (event) => {
        event.preventDefault();
    });
}, [])

[!NOTE] 上記が適用されると、終了イベントが常にキャンセルされるため、バナーが閉じることはありません。

高度な例

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

<IgrBanner ref={bannerRef}>
    <IgrIcon key="icon" slot="prefix" name="signal_wifi_off"></IgrIcon>
    <span key="message">You have lost connection to the internet. This app is offline.</span>
    <div key="actions" slot="actions">
        <IgrButton key="button-offline" variant="flat" clicked={() => bannerRef.current.hide()}>
            <IgrRipple key="ripple-offline" />
            <span key="action-offline">Continue Offline</span>
        </IgrButton>
        <IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
            <IgrRipple key="ripple-wifi" />
            <span key="action-wifi">Turn On Wifi</span>
        </IgrButton>
    </div>
</IgrBanner>

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

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

ナビゲーション バーには Wi-Fi アイコンが表示され、その click イベントのイベント リスナーも追加されます。変更ごとに refreshBanner() メソッドが呼び出されるため、アイコンはバナーを切り替えるだけでなく、接続の状態に応じて変化します。

<IgrNavbar>
    <h1 key="header">Gallery</h1>
    <IgrIcon ref={iconRef} key="icon" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
</IgrNavbar>

<IgrBanner ref={bannerRef}>
    ...
    <div key="actions" slot="actions">
        ...
        <IgrButton key="button-wifi" variant="flat" clicked={() => refreshBanner()}>
            <IgrRipple key="ripple-wifi" />
            <span key="action-wifi">Turn On Wifi</span>
        </IgrButton>
    </div>
</IgrBanner>

const bannerRef = useRef<IgrBanner>(null);
const iconRef = useRef<IgrIcon>(null);

const [wifiState, setWifiState] = useState(false);

function refreshBanner() {
    if (!wifiState) {
        iconRef.current.name = 'signal_wifi_4_bar';
        bannerRef.current.hide();
    } else {
        iconRef.current.name = 'signal_wifi_off';
        bannerRef.current.show();
    }
    setWifiState(current => !current);
}

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

スタイル設定

Banner コンポーネントは、いくつかの CSS パーツ (base、spacer、message、illustration、content および actions) を公開して、そのスタイルを完全に制御できるようにします。

igc-banner::part(spacer) {
    background: #dedede;
}

igc-banner::part(illustration) {
    color: #666666;
}

igc-banner::part(content) {
    color: #151515;
}

API リファレンス

• IgrBanner
• IgrCard
• IgrIcon
• IgrNavbar
• IgrToast
• IgrRipple

その他のリソース

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