React Snackbar (スナックバー)

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

Ignite UI for React Snackbar の例

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrSnackbarModule.register();

export default class SnackbarOverview extends React.Component<any, any> {

    public snackbarRef: IgrSnackbar;

    constructor(props: any) {
        super(props);
        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
        this.onSnackbarRef = this.onSnackbarRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
                    <span>Show Snackbar</span>
                </IgrButton>

                <IgrSnackbar ref={this.onSnackbarRef}>
                    <span>Snackbar Message</span>
                </IgrSnackbar>
            </div>
        );
    }

    public onSnackbarRef(snackbar: IgrSnackbar){
        if (!snackbar) { return; }
        this.snackbarRef = snackbar;
    }

    public onShowButtonClicked() {
        if(this.snackbarRef){
            this.snackbarRef.show();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarOverview/>);
tsxコピー

Edit in: Codesandbox

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

使用方法

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

npm install igniteui-react
cmd

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

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

IgrSnackbarModule.register();
tsx

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();
    }
}
tsx

コード例

表示時間

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrSnackbarModule.register();

export default class SnackbarDisplayTime extends React.Component<any, any> {

    public snackbarRef: IgrSnackbar;

    constructor(props: any) {
        super(props);
        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
        this.onSnackbarRef = this.onSnackbarRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
                    <span>Show Snackbar</span>
                </IgrButton>

                <IgrSnackbar ref={this.onSnackbarRef} displayTime={6000}>
                    <span>Snackbar with different display time</span>
                </IgrSnackbar>
            </div>
        );
    }

    public onSnackbarRef(snackbar: IgrSnackbar){
        if (!snackbar) { return; }
        this.snackbarRef = snackbar;
    }

    public onShowButtonClicked() {
        if(this.snackbarRef){
            this.snackbarRef.show();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarDisplayTime/>);
tsxコピー

Edit in: Codesandbox

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

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

EXAMPLE

TSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrSnackbarModule.register();

export default class SnackbarActionText extends React.Component<any, any> {

    public snackbarRef: IgrSnackbar;

    constructor(props: any) {
        super(props);                
        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
        this.onSnackbarRef = this.onSnackbarRef.bind(this);
        this.onSnackbarActionClicked = this.onSnackbarActionClicked.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
                    <span>Show Snackbar</span>
                </IgrButton>

                <IgrSnackbar ref={this.onSnackbarRef} keepOpen={true} actionText="Close" action={this.onSnackbarActionClicked}>
                    <span>Snackbar with enabled keep-open option</span>
                </IgrSnackbar>
            </div>
        );
    }

    public onSnackbarRef(snackbar: IgrSnackbar){
        if (!snackbar) { return; }
        this.snackbarRef = snackbar;
    }

    public onSnackbarActionClicked() {
        if (this.snackbarRef) {
            this.snackbarRef.hide();
        }
    }

    public onShowButtonClicked() {
        if(this.snackbarRef){
            this.snackbarRef.show();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarActionText/>);
tsxコピー

Edit in: Codesandbox

スタイル設定

IgrSnackbar コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

名前	説明
base	スナックバー コンポーネントの基本ラッパー。
message	スナックバーのメッセージ。
action	デフォルトのスナックバー アクション ボタン。
action-container	アクションを保持する領域。

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}
css

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './SnackbarStyling.css';
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();
IgrSnackbarModule.register();

export default class SnackbarStyling extends React.Component<any, any> {

    public snackbarRef: IgrSnackbar;

    constructor(props: any) {
        super(props);                
        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
        this.onSnackbarRef = this.onSnackbarRef.bind(this);
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrButton variant="contained" clicked={this.onShowButtonClicked}>
                    <span>Show Snackbar</span>
                </IgrButton>

                <IgrSnackbar ref={this.onSnackbarRef}>
                    <span>Styled Snackbar</span>
                </IgrSnackbar>
            </div>
        );
    }

    public onSnackbarRef(snackbar: IgrSnackbar){
        if (!snackbar) { return; }
        this.snackbarRef = snackbar;
    }

    public onShowButtonClicked() {
        if(this.snackbarRef){
            this.snackbarRef.show();
        }
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarStyling/>);
tsxコピー

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

Edit in: Codesandbox

API リファレンス

• actionText
• displayTime
• keepOpen
• show
• IgrSnackbar
• スタイル設定 & テーマ

その他のリソース

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