ConfirmDialog は、ダイアログを使用する、使いやすくカスタマイズ可能な確認 API です。
import { ConfirmDialog } from 'primereact/confirmdialog'; // For <ConfirmDialog /> component
import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog method
ConfirmDialog コンポーネントは、カスタマイズのための設定オブジェクトを受け取る `confirmDialog` 関数と対話するページ上に存在する必要があります。
<Toast ref={toast} />
<ConfirmDialog />
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
確認オプションの `position` プロパティを使用して、画面のすべての端と角にダイアログを表示します。
<Toast ref={toast} />
<ConfirmDialog />
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
<Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
<Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
<Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
</div>
<div className="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
<Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
<Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
</div>
宣言型は、`visible` へのバインディングと `onHide` イベントコールバックを使用して ConfirmDialog を制御するプログラム的なアプローチの代替手段です。
<Toast ref={toast} />
<ConfirmDialog group="declarative" visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
テンプレートを使用すると、メッセージの内容をカスタマイズできます。
<Toast ref={toast} />
<ConfirmDialog group="templating" />
<div className="card flex justify-content-center">
<Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
</div>
ブレークポイントオプションを使用して、画面サイズごとに ConfirmDialog の幅を調整できます。キーはブレークポイントの最大幅を定義し、値は対応する幅を定義します。一致するブレークポイントがない場合は、スタイルプロパティで定義された幅が使用されます。
<Toast ref={toast} />
<ConfirmDialog
group="declarative"
visible={visible}
onHide={() => setVisible(false)}
message="Are you sure you want to proceed?"
header="Confirmation"
icon="pi pi-exclamation-triangle"
accept={accept}
reject={reject}
style={{ width: '50vw' }}
breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
/>
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
ヘッドレスモードは、デフォルトの要素の代わりに確認UI全体を実装できる`content`プロパティを定義することで有効になります。
<Toast ref={toast} />
<ConfirmDialog
group="headless"
content={({ headerRef, contentRef, footerRef, hide, message }) => (
<div className="flex flex-column align-items-center p-5 surface-overlay border-round">
<div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
<i className="pi pi-question text-5xl"></i>
</div>
<span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
{message.header}
</span>
<p className="mb-0" ref={contentRef}>
{message.message}
</p>
<div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
<Button
label="Save"
onClick={(event) => {
hide(event);
accept();
}}
className="w-8rem"
></Button>
<Button
label="Cancel"
outlined
onClick={(event) => {
hide(event);
reject();
}}
className="w-8rem"
></Button>
</div>
</div>
)}
/>
<div className="card flex flex-wrap gap-2 justify-content-center">
<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
</div>
ConfirmDialog コンポーネントは、ヘッダー要素を参照する `aria-labelledby` とともに `alertdialog` ロールを使用します。ただし、属性はルート要素に渡されるため、`aria-labelledby` を使用してこのデフォルトの動作を上書きできます。さらに、フォーカスがポップアップ内に保持されるため、`aria-modal` が追加されます。
ボタンなど、キーボードでアクセスできるトリガーコンポーネントを使用することをお勧めします。そうでない場合は、`tabIndex` を追加する必要があります。
`confirm` 関数が使用され、トリガーがパラメーターとして渡されると、ConfirmDialog は `aria-expanded` 状態属性と `aria-controls` をトリガーに追加して、トリガーとポップアップの関係を定義します。
const confirm = (event) => {
confirmDialog({
trigger: event.currentTarget,
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
icon: 'pi pi-exclamation-triangle',
accept: () => acceptFunc(),
reject: () => rejectFunc()
});
}
<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>
<ConfirmDialog />
ダイアログが `visible` プロパティで制御されている場合、`aria-expanded` と `aria-controls` を明示的に処理する必要があります。
<ConfirmDialog id="dlg_confirmation" visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" aria-controls={visible ? 'dlg_confirmation' : null} aria-expanded={visible ? true : false} />
| キー | 機能 |
|---|---|
| tab | ポップアップ内の次のフォーカス可能な要素にフォーカスを移動します。 |
| shift + tab | ポップアップ内の前のフォーカス可能な要素にフォーカスを移動します。 |
| escape | ポップアップを閉じ、フォーカスをトリガーに移動します。 |
| キー | 機能 |
|---|---|
| enter | アクションをトリガーし、ポップアップを閉じ、フォーカスをトリガーに移動します。 |
| space | アクションをトリガーし、ポップアップを閉じ、フォーカスをトリガーに移動します。 |