import DeferredContent from 'primevue/deferredcontent';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/deferredcontent/deferredcontent.min.js"></script>
DeferredContent is used as a wrapper element of its content..
<DeferredContent>
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</DeferredContent>
onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.
<DeferredContent @load="onDataLoad">
<DataTable :value="cars">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
</DataTable>
</DeferredContent>
Component has no properties.
| Name | Parameters | Description |
|---|---|---|
| load | event: Event object | Callback to invoke when deferred content is loaded.. |
Component does not apply any styling.
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you have full control over the roles like landmark and attributes like aria-live.
<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
Content
</DeferredContent>
Component does not include any interactive elements.
None.