トースト

Toastは、オーバーレイにメッセージを表示するために使用されます。

インポート#


import { Toast } from 'primereact/toast';

基本#

メッセージは、コンポーネント参照によって提供されるshowメソッドを呼び出すことによって表示されます。単一のメッセージは、severity、summaryなど、さまざまなプロパティを定義するMessageインターフェースによって指定されます。詳細.


<Toast ref={toast} />
<Button onClick={show} label="Basic" />

重大度#

severityオプションは、メッセージの種類を指定します。


<Toast ref={toast} />
<Button label="Success" severity="success" onClick={showSuccess} />
<Button label="Info" severity="info" onClick={showInfo} />
<Button label="Warn" severity="warning" onClick={showWarn} />
<Button label="Error" severity="danger" onClick={showError} />
<Button label="Secondary" severity="secondary" onClick={showSecondary} />
<Button label="Contrast" severity="contrast" onClick={showContrast} />

位置#

メッセージの位置は、positionプロパティでカスタマイズできます。


<Toast ref={toastTL} position="top-left" />
<Toast ref={toastBL} position="bottom-left" />
<Toast ref={toastBR} position="bottom-right" />
<Button label="Top Left" className="mr-2" onClick={showTopLeft} />
<Button label="Bottom Left" className="p-button-warning" onClick={showBottomLeft} />
<Button label="Bottom Right" className="p-button-success" onClick={showBottomRight} />

複数#

複数のメッセージは、配列をshowメソッドに渡すことで表示されます。


<Toast ref={toast} />
<Button onClick={showMultiple} label="Multiple" className="p-button-warning" />

固定#

メッセージはlifeオプションで定義された3000ms後に消えます。自動的に非表示にならないメッセージを表示するには、stickyオプションを設定します。


<Toast ref={toast} />
<Button onClick={showSticky} label="Sticky" severity="success" />
<Button onClick={clear} label="Clear" />

テンプレート#

メッセージ内のカスタムコンテンツは、contentオプションで定義されます。


toastBC.current.show({
    severity: 'success',
    summary: 'Can you send me the report?',
    sticky: true,
    content: (props) => (
        <div className="flex flex-column align-items-left" style={{ flex: '1' }}>
            <div className="flex align-items-center gap-2">
                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                <span className="font-bold text-900">Amy Elsner</span>
            </div>
            <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
            <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
        </div>
    )
});

ヘッドレス#

ヘッドレスモードは、デフォルトの要素の代わりにダイアログUI全体を実装できるcontentプロパティを定義することで有効になります。


<Toast
    ref={toast}
    content={({ message }) => (
        <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
            <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
            <div className="flex flex-column gap-3 w-full">
                <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
                <p className="m-0 text-base text-700">{message.detail}</p>
                <div className="flex flex-column gap-2">
                    <ProgressBar value={progress} showValue="false"></ProgressBar>
                    <label className="text-right text-xs text-white">{progress}% uploaded...</label>
                </div>
                <div className="flex gap-3 mb-3">
                    <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
                    <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
                </div>
            </div>
        </section>
    )}
></Toast>
<Button onClick={show} label="View" />

アクセシビリティ#

スクリーンリーダー

Toastコンポーネントは、暗黙的にaria-liveを "assertive"、aria-atomicを "true" として定義するalertロールを使用します。

閉じる要素は、デフォルトでロケールAPIのaria.closeプロパティを参照するaria-labelを持つbuttonです。closeButtonPropsを使用して要素をカスタマイズし、デフォルトのaria-labelを上書きできます。

閉じるボタンのキーボードサポート

キー	機能
Enter	メッセージを閉じます。
スペース	メッセージを閉じます。