React Toast (トースト) の概要
React Toast (トースト) は、変更されたレコードの状態をエンド ユーザーに通知するメッセージ コンテンツを表示するために使用される超軽量で小さなポップアップ コンポーネントです。React トースト通知を画面の下部またはその他の指定された領域に簡単に配置して表示できます。または、シンプルで簡単な方法でそれらを却下することもできます。
React Toast コンポーネントは、主にシステム メッセージング、プッシュ通知、警告メッセージ、および情報に使用されます。ユーザーが却下することはできません。このコントロールには、アニメーション効果、トースト コンポーネントが表示される時間を構成するための表示時間プロパティ、スタイル設定などのさまざまな機能があります。
React Toast の例
以下の単純な Ignite UI for React Toast の例を見てください。ボタンをクリックすると、アニメーションの通知メッセージがポップアップ表示されます。
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrToastModule.register();
export default class ToastOverview extends React.Component<any, any> {
public toastRef: IgrToast;
constructor(props: any) {
super(props);
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
this.onToastRef = this.onToastRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<IgrButton variant="contained" clicked={this.onShowButtonClicked}>
<span>Show Toast</span>
</IgrButton>
<IgrToast ref={this.onToastRef}>
<span>Toast Message</span>
</IgrToast>
</div>
);
}
public onToastRef(toast: IgrToast){
if (!toast) { return; }
this.toastRef = toast;
}
public onShowButtonClicked() {
if(this.toastRef){
this.toastRef.show();
}
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastOverview/>);
tsx
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Ignite UI for React のToast Notification (トースト通知) の使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
cmd
次に、以下のように、React IgrToast
とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrToastModule, IgrToast } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrToastModule.register();
tsx
Ignite UI for React の完全な概要については、作業の開始トピックを参照してください。
Toast コンポーネントを表示する最も簡単な方法は、show
メソッドを使用して、ボタン クリックで呼び出すことです。
<IgrButton variant="contained" clicked={this.onShowButtonClicked}>
<span>Show Toast</span>
</IgrButton>
<IgrToast ref={this.onToastRef}>
<span>Toast Message</span>
</IgrToast>
public onToastRef(toast: IgrToast) {
if (!toast) { return; }
this.toastRef = toast;
}
public onShowButtonClicked() {
if (this.toastRef) {
this.toastRef.show();
}
}
tsx
コード例
プロパティ
displayTime
プロパティを使用して、Toast コンポーネントが表示される期間を構成します。デフォルトでは、4000 ミリ秒に設定されています。
デフォルトでは、Toast コンポーネントは、displayTime
で指定された期間が経過すると自動的に非表示になります。keepOpen
プロパティを使用して、この動作を変更できます。このようにして、Toast は表示されたままになります。
<div>
<IgrButton variant="contained" clicked={this.onToggleButtonClicked}>
<span>Toggle Toast</span>
</IgrButton>
<IgrButton variant="contained" clicked={this.onKeepOpenButtonClicked}>
<span>Toggle keepOpen Property</span>
</IgrButton>
<IgrButton variant="contained" clicked={this.onDisplayTimeButtonClicked}>
<span>Set DisplayTime to 8000</span>
</IgrButton>
</div>
<IgrToast ref={this.onToastRef}>
<span>Toast Message</span>
</IgrToast>
public onToastRef(toast: IgrToast) {
if (!toast) { return; }
this.toastRef = toast;
}
public onToggleButtonClicked() {
if (this.toastRef) {
this.toastRef.toggle();
}
}
public onKeepOpenButtonClicked() {
if (this.toastRef) {
this.toastRef.keepOpen = !this.toastRef.keepOpen;
}
}
public onDisplayTimeButtonClicked() {
if (this.toastRef) {
this.toastRef.displayTime = 8000;
}
}
tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrToastModule.register();
export default class ToastProperties extends React.Component<any, any> {
public toastRef: IgrToast;
constructor(props: any) {
super(props);
this.onToggleButtonClicked = this.onToggleButtonClicked.bind(this);
this.onKeepOpenButtonClicked = this.onKeepOpenButtonClicked.bind(this);
this.onDisplayTimeButtonClicked = this.onDisplayTimeButtonClicked.bind(this);
this.onToastRef = this.onToastRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
<IgrButton variant="contained" clicked={this.onToggleButtonClicked}>
<span>Toggle Toast</span>
</IgrButton>
<IgrButton variant="contained" clicked={this.onKeepOpenButtonClicked}>
<span>Toggle keepOpen Property</span>
</IgrButton>
<IgrButton variant="contained" clicked={this.onDisplayTimeButtonClicked}>
<span>Set DisplayTime to 8000</span>
</IgrButton>
</div>
<IgrToast ref={this.onToastRef}>
<span>Toast Message</span>
</IgrToast>
</div>
);
}
public onToastRef(toast: IgrToast){
if (!toast) { return; }
this.toastRef = toast;
}
public onToggleButtonClicked() {
if(this.toastRef){
this.toastRef.toggle();
}
}
public onKeepOpenButtonClicked() {
if(this.toastRef){
this.toastRef.keepOpen = !this.toastRef.keepOpen;
}
}
public onDisplayTimeButtonClicked() {
if(this.toastRef){
this.toastRef.displayTime = 8000;
}
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastProperties/>);
tsx
![Ignite UI for React | CTA Banner](https://static.infragistics.com/marketing/Blog-in-content-ads/jp/ignite-ui-react-01.gif)
スタイル設定
タグ セレクターを使用して React IgrToast
通知を直接スタイル設定できます。
igc-toast {
background: #011627;
color: #ECAA53;
outline-color: #ECAA53;
}
css
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './ToastStyling.css';
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrButtonModule.register();
IgrToastModule.register();
export default class ToastStyling extends React.Component<any, any> {
public toastRef: IgrToast;
constructor(props: any) {
super(props);
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
this.onToastRef = this.onToastRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample">
<IgrButton variant="contained" clicked={this.onShowButtonClicked}>
<span>Show Styled Toast</span>
</IgrButton>
<IgrToast ref={this.onToastRef}>
<span>Styled Message</span>
</IgrToast>
</div>
);
}
public onToastRef(toast: IgrToast){
if (!toast) { return; }
this.toastRef = toast;
}
public onShowButtonClicked() {
if(this.toastRef){
this.toastRef.show();
}
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<ToastStyling/>);
tsx
igc-toast {
background: #011627;
color: #ECAA53;
outline-color: #ECAA53;
}
css
API リファレンス
その他のリソース