オーバーレイパネル

オーバーレイパネルは、ポップオーバーとしても知られ、ページ上の他のコンポーネントをオーバーレイできるコンテナコンポーネントです。

インポート#


import { OverlayPanel } from 'primereact/overlaypanel';
         

基本#

オーバーレイパネルは、その参照を介してアクセスされ、表示/非表示は、ターゲットのイベントとともにtoggle、show、およびhideメソッドを使用して制御されます。


<Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
<OverlayPanel ref={op}>
    <img src="/images/product/bamboo-watch.jpg" alt="Bamboo Watch"></img>
</OverlayPanel>
         

データテーブル#

ポップアップ内にDataTableを表示して項目を選択する例。ESCキーが押されたときにポップアップを閉じるために、closeOnEscapeが有効になっています。dismissableプロパティをfalseに設定すると、ポップアップの外側をクリックしたときにポップアップが閉じなくなります。


<Toast ref={toast} />
<Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
{selectedProductContent}
<OverlayPanel ref={op} showCloseIcon>
    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
        <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
        <Column header="Image" body={imageBody} />
        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
    </DataTable>
</OverlayPanel>
         

アクセシビリティ#

スクリーンリーダー

オーバーレイパネルコンポーネントはdialogロールを使用します。また、属性はルート要素に渡されるため、ポップアップコンテンツを説明するためにaria-labelやaria-labelledbyのような属性を定義できます。さらに、 ポップアップ内にフォーカスが保持されるため、aria-modalが追加されます。

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

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

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

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

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

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