Fixed divider sample, update deferred demos
parent
72fd3c80f3
commit
bad21c9163
|
@ -6,7 +6,7 @@
|
||||||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||||
|
|
||||||
<DeferredContent @load="onImageLoad">
|
<DeferredContent @load="onImageLoad">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</div>
|
</div>
|
||||||
<DocSectionCode :code="code" />
|
<DocSectionCode :code="code" />
|
||||||
|
@ -19,7 +19,7 @@ export default {
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<DeferredContent @load="onImageLoad">
|
<DeferredContent @load="onImageLoad">
|
||||||
<img src="/images/nature/nature4.jpg" alt="Nature" />
|
<img src="/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
`,
|
`,
|
||||||
options: `
|
options: `
|
||||||
|
@ -29,7 +29,7 @@ export default {
|
||||||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||||
|
|
||||||
<DeferredContent @load="onImageLoad">
|
<DeferredContent @load="onImageLoad">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -51,7 +51,7 @@ export default {
|
||||||
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
<div style="height: 1000px">Scroll down to lazy load an image.</div>
|
||||||
|
|
||||||
<DeferredContent @load="onImageLoad">
|
<DeferredContent @load="onImageLoad">
|
||||||
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" />
|
<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature" class="rounded-xl w-full md:w-96 block sm:mx-auto" />
|
||||||
</DeferredContent>
|
</DeferredContent>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>A practical example that loads only when table becomes visible in viewport.</p>
|
<p>A practical example that triggers a fetch when the table becomes visible in viewport.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
|
<div style="height: 800px">Scroll down to lazy load a DataTable.</div>
|
||||||
|
|
|
@ -18,8 +18,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-2/12">
|
<div class="w-full md:w-2/12">
|
||||||
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
|
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
|
||||||
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
|
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||||
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||||
|
@ -50,8 +50,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-2/12">
|
<div class="w-full md:w-2/12">
|
||||||
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
|
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
|
||||||
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
|
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||||
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||||
|
@ -76,8 +76,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-2/12">
|
<div class="w-full md:w-2/12">
|
||||||
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
|
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
|
||||||
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
|
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||||
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||||
|
@ -107,8 +107,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-2/12">
|
<div class="w-full md:w-2/12">
|
||||||
<Divider layout="vertical" class="hidden md:flex"><b>OR</b></Divider>
|
<Divider layout="vertical" class="!hidden md:!flex"><b>OR</b></Divider>
|
||||||
<Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
|
<Divider layout="horizontal" class="!flex md:!hidden" align="center"><b>OR</b></Divider>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
<div class="w-full md:w-5/12 flex items-center justify-center py-5">
|
||||||
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
<Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-full max-w-[17.35rem] mx-auto"></Button>
|
||||||
|
|
Loading…
Reference in New Issue