vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merged new Docs and Demos

Browse source
This commit is contained in:
Cagatay Civici 2023-02-28 11:29:30 +03:00
parent 296cc217fb
commit dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
Download patch file Download diff file Expand all files Collapse all files

18
doc/deferredcontent/AccessibilityDoc.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
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 <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p>
<pre v-code><code>
&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
Content
&lt;/DeferredContent&gt;
</code></pre>
<h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p>
</DocSectionText>
</template>

73
doc/deferredcontent/BasicDoc.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<DocSectionText v-bind="$attrs">
<p>DeferredContent is used by wrapping the target.</p>
</DocSectionText>
<div class="card">
<div style="height: 800px">Scroll down to lazy load an image.</div>
<DeferredContent @load="onImageLoad">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
</DeferredContent>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<DeferredContent @load="onImageLoad">
<img src="/images/nature/nature4.jpg" alt="Nature" />
</DeferredContent>`,
options: `
<template>
<div class="card">
<Toast />
<div style="height: 800px">Scroll down to lazy load an image.</div>
<DeferredContent @load="onImageLoad">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
</DeferredContent>
</div>
</template>
<script>
export default {
methods: {
onImageLoad() {
this.$toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
}
}
};
<\/script>`,
composition: `
<template>
<div class="card">
<Toast />
<div style="height: 800px">Scroll down to lazy load an image.</div>
<DeferredContent @load="onImageLoad">
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
</DeferredContent>
</div>
</template>
<script setup>
import { ref } from 'vue';
const onImageLoad = () => {
toast.add({ severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable', life: 2000 });
};
<\/script>`
}
};
},
methods: {
onImageLoad() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Image loaded', life: 2000 });
}
}
};
</script>

108
doc/deferredcontent/DataTableDoc.vue Normal file
View file

@ -0,0 +1,108 @@
<template>
<DocSectionText v-bind="$attrs">
<p>A practical example that loads only when table becomes visible in viewport.</p>
</DocSectionText>
<div class="card">
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>
</div>
<DocSectionCode :code="code" :service="['ProductService']" v-bind="$attrs" />
</template>
<script>
import { ProductService } from '/service/ProductService';
export default {
data() {
return {
code: {
basic: `
<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>`,
options: `
<template>
<div class="card">
<Toast />
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>
</div>
</template>
<script>
import { ProductService } from '@/service/ProductService';
export default {
data() {
return {
products: null
};
},
methods: {
onDataLoad() {
ProductService.getProductsSmall().then((data) => (this.products = data));
this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
}
}
};
<\/script>`,
composition: `
<template>
<div class="card">
<Toast />
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
<DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
<DataTable :value="products">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</DeferredContent>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { ProductService } from '@/service/ProductService';
const products = ref(null);
const onDataLoad = () => {
ProductService.getProductsSmall().then((data) => (products.value = data));
toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
};
<\/script>`
},
products: null
};
},
methods: {
onDataLoad() {
ProductService.getProductsSmall().then((data) => (this.products = data));
this.$toast.add({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed', life: 2000 });
}
}
};
</script>

16
doc/deferredcontent/ImportDoc.vue Normal file
View file

@ -0,0 +1,16 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode import hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `import DeferredContent from 'primevue/deferredcontent';`
}
};
}
};
</script>

5
doc/deferredcontent/StyleDoc.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<DocSectionText id="style" label="Style" v-bind="$attrs">
<p>Component does not apply any styling.</p>
</DocSectionText>
</template>