React Snackbar (スナックバー)

    Ignite UI for React Snackbar コンポーネントは、画面の下部に簡潔なメッセージを表示することにより、操作に関するフィードバックを提供するために使用されます。

    Ignite UI for React Snackbar の例

    このサンプルは、IgrSnackbar コンポーネントを作成する方法を示しています。

    使用方法

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

    npm install igniteui-react
    

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

    import { IgrSnackbarModule, IgrSnackbar } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    IgrSnackbarModule.register();
    

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

    Snackbar コンポーネントを表示する最も簡単な方法は、show メソッドを使用して、ボタン クリックで呼び出すことです。

    <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
        <span>Show Snackbar</span>
    </IgrButton>
    <IgrSnackbar ref={this.onSnackbarRef}>
        <span>Snackbar Message</span>
    </IgrSnackbar>
    
    public onSnackbarRef(snackbar: IgrSnackbar) {
        if (!snackbar) { return; }
        this.snackbarRef = snackbar;
    }
    public onShowButtonClicked() {
        if (this.snackbarRef) {
            this.snackbarRef.show();
        }
    }
    

    コード例

    表示時間

    displayTime プロパティを使用して、Snackbar コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。

    Action Text (アクション テキスト)

    デフォルトでは、Snackbar コンポーネントは、displayTime で指定された期間が経過すると自動的に非表示になります。keepOpen プロパティを使用して、この動作を変更できます。この場合、Snackbar は非表示になりません。Snackbar の actionText を使用すると、コンポーネント内にアクション ボタンを表示できます。

    スタイル設定

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

    igc-snackbar::part(base) {
        background: #0d6efd;
        border-color: #0d6efd;
        color: white;
    }
    

    API リファレンス

    その他のリソース