React Snackbar (スナックバー)

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

Ignite UI for React Snackbar の例

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

EXAMPLE

TSX

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

export default function SnackbarOverview() {
    const snackbarRef = useRef<IgrSnackbar>(null);

    const onShowButtonClicked = () => {
        snackbarRef.current?.show();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar ref={snackbarRef}>
                <span>Snackbar Message</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function 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 { IgrSnackbar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
tsx

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

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

<IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={snackbarRef}>
    <span>Snackbar Message</span>
</IgrSnackbar>

const snackbarRef = useRef<IgrSnackbar>(null);

const onShowButtonClicked = () => {
      if (snackbarRef) {
          snackbarRef.current.show();
      }
  }
tsx

コード例

表示時間

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

EXAMPLE

TSX

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

export default function SnackbarDisplayTime() {
    const snackbarRef = useRef<IgrSnackbar>(null);

    const onShowButtonClicked = () => {
        snackbarRef.current?.show();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

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

// rendering above function 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, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarActionText() {
    const snackbarRef = useRef<IgrSnackbar>(null);

    const onShowButtonClicked = () => {
        snackbarRef.current?.show();
    };

    const onSnackbarActionClicked = () => {
        snackbarRef.current?.hide();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

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

// rendering above function 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, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './SnackbarStyling.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarStyling() {
    const snackbarRef = useRef<IgrSnackbar>(null);

    const onShowButtonClicked = () => {
        snackbarRef.current?.show();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar ref={snackbarRef}>
                <span>Styled Snackbar</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function 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 (英語)