ConfirmPopup

ConfirmPopup は、ポップオーバーを使用した、使いやすくカスタマイズ可能な確認 API です。

インポート#


import { ConfirmPopup } from 'primereact/confirmpopup'; // To use <ConfirmPopup> tag
import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup method
         

基本#

ConfirmPopup コンポーネントは、カスタマイズ用の設定オブジェクトを受け取るconfirmPopup 関数と対話するページ上に存在する必要があります。 ポップオーバーを整列させるためには、ソース要素を参照するtarget プロパティを指定する必要があります。


<Toast ref={toast} />
<ConfirmPopup />
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>
         

宣言的#

宣言的は、visibleへのバインディングと、ソース要素を参照するtargetプロパティとともに、onHideイベントコールバックでConfirmDialogを制御するプログラム的なアプローチの代替手段です。


<Toast ref={toast} />
<ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
    message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
         

テンプレート#

テンプレートを使用すると、メッセージコンテンツをカスタマイズできます。


<Toast ref={toast} />
<ConfirmPopup group="templating" />
<div className="card flex justify-content-center">
    <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
</div>
         

ヘッドレス#

ヘッドレスモードは、デフォルトの要素の代わりに、確認 UI 全体を実装できる content prop を定義することで有効になります。


<Toast ref={toast} />
<ConfirmPopup
    group="headless"
    content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
        <div className="bg-gray-900 text-white border-round p-3">
            <span>{message}</span>
            <div className="flex align-items-center gap-2 mt-3">
                <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
                <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
            </div>
        </div>
    }
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
</div>
         

アクセシビリティ#

スクリーンリーダー

ConfirmPopup コンポーネントは alertdialog ロールを使用しており、任意の属性がルート要素に渡されるため、ポップアップの内容を説明するために、aria-label や aria-labelledby などの属性を定義できます。 加えて aria-modal は、フォーカスがポップアップ内に保持されるため、追加されます。

ボタンなど、キーボードでアクセスできるトリガーコンポーネントを使用することをお勧めします。そうでない場合は、tabIndex を追加する必要があります。ConfirmPopup は、トリガーとポップアップ間の関係が定義されるように、aria-expanded 状態属性とaria-controlsをトリガーに追加します。

オーバーレイのキーボードサポート

ポップアップが開くと、最初のフォーカス可能な要素がフォーカスを受け取ります。これは、ポップアップ内の要素に autofocus を追加することでカスタマイズできます。

キー機能
tabポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。
shift + tabポップアップ内の前のフォーカス可能な要素にフォーカスを移動します。
escapeポップアップを閉じ、トリガーにフォーカスを移動します。

ボタンのキーボードサポート

キー機能
enterアクションをトリガーし、ポップアップを閉じ、トリガーにフォーカスを移動します。
spaceアクションをトリガーし、ポップアップを閉じ、トリガーにフォーカスを移動します。
              PrimeReact 10.8.3 by PrimeTek