pull/2159/head
mertsincan 2022-02-14 12:18:22 +00:00
parent 65b617f6ae
commit 63e8f54e2f
2 changed files with 12 additions and 12 deletions

View File

@ -49,12 +49,12 @@
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (100000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="flex align-items-center p-2" style="height: 31px" >
<div class="flex align-items-center p-2" style="height: 38px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div>
</template>

View File

@ -562,12 +562,12 @@ export default {
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (1000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="flex align-items-center p-2" style="height: 31px" >
<div class="flex align-items-center p-2" style="height: 38px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div>
</template>
@ -719,12 +719,12 @@ export default {
<Dropdown placeholder="Loading..." loading></Dropdown>
<h5>Virtual Scroll (1000 Items)</h5>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
<Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 38 }" placeholder="Select Item"></Dropdown>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="flex align-items-center p-2" style="height: 31px" >
<div class="flex align-items-center p-2" style="height: 38px" >
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
</div>
</template>
@ -880,12 +880,12 @@ export default {
<p-dropdown placeholder="Loading..." loading></p-dropdown>
<h5>Virtual Scroll (1000 Items)</h5>
<p-dropdown v-model="selectedItem1" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 31 }" placeholder="Select Item"></p-dropdown>
<p-dropdown v-model="selectedItem1" :options="items" option-label="label" option-value="value" :virtual-scroller-options="{ itemSize: 38 }" placeholder="Select Item"></p-dropdown>
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
<p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
<template v-slot:loader="{ options }">
<div class="flex align-items-center p-2" style="height: 31px" >
<div class="flex align-items-center p-2" style="height: 38px" >
<p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
</div>
</template>