DataScroller

DataScrollerは、スクロールを使用したオンデマンドローディングでデータを表示します。

インポート#


import { DataScroller } from 'primereact/datascroller';

基本#

DataScrollerは、スクロールを使用したオンデマンドローディングでデータを表示します。

製品リスト

利用可能なオプションはありません


<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />

インライン#

DataScrollerは、インラインモードでは、ドキュメントではなく自身のスクロールイベントをリッスンできます。

下にスクロールしてさらに読み込む

利用可能なオプションはありません


<DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />

ローダー#

スクロールの代わりに、カスタム要素を使用してデータを読み込むことができます。

フッターにある[読み込み]ボタンをクリックしてさらに読み込む

利用可能なオプションはありません


<DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />

アクセシビリティ#

スクリーンリーダー

DataScrollerは、セマンティックなリスト要素を使用してアイテムをリストします。特定のロールは強制されませんが、任意のariaロールと属性をコンテナ要素に渡すことができるため、使用できます。リスト要素は、listPropsプロパティを使用してアクセシビリティをカスタマイズすることもできます。

キーボードサポート

コンポーネントには、組み込みのインタラクティブ要素は含まれていません。