update scroller docs

primefaces · Dec 19, 2024 · d3d203d · d3d203d
1 parent d7633d3
commit d3d203d
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 72 deletions.
diff --git a/apps/showcase/doc/scroller/basicdoc.ts b/apps/showcase/doc/scroller/basicdoc.ts
@@ -13,7 +13,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                         {{ item }}
                     </div>
@@ -39,7 +39,7 @@ export class BasicDoc {
     styleClass="border border-surface"
     [style]="{ width: '200px', height: '200px' }"
 >
-    <ng-template pTemplate="item" let-item let-options="options">
+    <ng-template #item let-item let-options="options">
         <div
             class="flex items-center p-2"
             [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -58,7 +58,7 @@ export class BasicDoc {
         styleClass="border border-surface"
         [style]="{ width: '200px', height: '200px' }"
     >
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"

diff --git a/apps/showcase/doc/scroller/delaydoc.ts b/apps/showcase/doc/scroller/delaydoc.ts
@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
             <div>
                 <span class="font-bold block mb-2">No Delay</span>
                 <p-virtualscroller [items]="items" [itemSize]="50" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template pTemplate="item" let-item let-options="options">
+                    <ng-template #item let-item let-options="options">
                         <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                             {{ item }}
                         </div>
@@ -22,7 +22,7 @@ import { Component } from '@angular/core';
             <div>
                 <span class="font-bold block mb-2">150ms</span>
                 <p-virtualscroller [items]="items" [itemSize]="50" [delay]="150" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template pTemplate="item" let-item let-options="options">
+                    <ng-template #item let-item let-options="options">
                         <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                             {{ item }}
                         </div>
@@ -32,7 +32,7 @@ import { Component } from '@angular/core';
             <div>
                 <span class="font-bold block mb-2">500ms</span>
                 <p-virtualscroller [items]="items" [itemSize]="50" [delay]="500" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template pTemplate="item" let-item let-options="options">
+                    <ng-template #item let-item let-options="options">
                         <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                             {{ item }}
                         </div>
@@ -56,7 +56,7 @@ export class DelayDoc {
     [itemSize]="50"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -72,7 +72,7 @@ export class DelayDoc {
     [delay]="150"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -88,7 +88,7 @@ export class DelayDoc {
     [delay]="500"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -106,7 +106,7 @@ export class DelayDoc {
             [itemSize]="50"
             styleClass="border border-surface"
             [style]="{'width': '200px', 'height': '200px'}">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div
                         class="flex items-center p-2"
                         [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -124,7 +124,7 @@ export class DelayDoc {
             [delay]="150"
             styleClass="border border-surface"
             [style]="{'width': '200px', 'height': '200px'}">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div
                         class="flex items-center p-2"
                         [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
@@ -142,7 +142,7 @@ export class DelayDoc {
             [delay]="500"
             styleClass="border border-surface"
             [style]="{'width': '200px', 'height': '200px'}">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div
                         class="flex items-center p-2"
                         [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"

diff --git a/apps/showcase/doc/scroller/griddoc.ts b/apps/showcase/doc/scroller/griddoc.ts
@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                         <div *ngFor="let el of item" style="width: 100px">{{ el }}</div>
                     </div>
@@ -38,7 +38,7 @@ export class GridDoc implements OnInit {
     orientation="both"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 [ngClass]="{ 'bg-surface-100 dark:bg-surface-700' : options.odd }"
@@ -57,7 +57,7 @@ export class GridDoc implements OnInit {
         orientation="both"
         styleClass="border border-surface"
         [style]="{'width': '200px', 'height': '200px'}">
-            <ng-template pTemplate="item" let-item let-options="options">
+            <ng-template #item let-item let-options="options">
                 <div
                     class="flex items-center p-2"
                     [ngClass]="{ 'bg-surface-100 dark:bg-surface-700' : options.odd }"

diff --git a/apps/showcase/doc/scroller/horizontaldoc.ts b/apps/showcase/doc/scroller/horizontaldoc.ts
@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" orientation="horizontal" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div class="flex items-center p-2" style="writing-mode: vertical-lr; width: 50px;" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
                         {{ item }}
                     </div>
@@ -36,7 +36,7 @@ export class HorizontalDoc {
     orientation="horizontal"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
+        <ng-template #item let-item let-options="options">
             <div
                 class="flex items-center p-2"
                 style="writing-mode: vertical-lr; width: 50px;"
@@ -55,7 +55,7 @@ export class HorizontalDoc {
         orientation="horizontal"
         styleClass="border border-surface"
         [style]="{'width': '200px', 'height': '200px'}">
-            <ng-template pTemplate="item" let-item let-options="options">
+            <ng-template #item let-item let-options="options">
                 <div
                     class="flex items-center p-2"
                     style="writing-mode: vertical-lr; width: 50px;"

diff --git a/apps/showcase/doc/scroller/lazyloaddoc.ts b/apps/showcase/doc/scroller/lazyloaddoc.ts
@@ -19,7 +19,7 @@ interface LazyEvent {
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" [loading]="lazyLoading" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                         {{ item }}
                     </div>
@@ -79,12 +79,9 @@ export class LazyLoadDoc {
     (onLazyLoad)="onLazyLoad($event)"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
-            <div
-                class="flex items-center p-2"
-                [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
-                style="height: 50px;">
-                    {{ item }}
+        <ng-template #item let-item let-options="options">
+            <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                {{ item }}
             </div>
         </ng-template>
 </p-virtualscroller>`,
@@ -100,12 +97,9 @@ export class LazyLoadDoc {
         (onLazyLoad)="onLazyLoad($event)"
         styleClass="border border-surface"
         [style]="{'width': '200px', 'height': '200px'}">
-            <ng-template pTemplate="item" let-item let-options="options">
-                <div
-                    class="flex items-center p-2"
-                    [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
-                    style="height: 50px;">
-                        {{ item }}
+            <ng-template #item let-item let-options="options">
+                <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                    {{ item }}
                 </div>
             </ng-template>
     </p-virtualscroller>

diff --git a/apps/showcase/doc/scroller/loaderdoc.ts b/apps/showcase/doc/scroller/loaderdoc.ts
@@ -11,7 +11,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         <div class="card flex flex-wrap justify-center gap-4">
             <div>
                 <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template pTemplate="item" let-item let-options="options">
+                    <ng-template #item let-item let-options="options">
                         <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                             {{ item }}
                         </div>
@@ -20,7 +20,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
             </div>
             <div>
                 <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template pTemplate="item" let-item let-options="options">
+                    <ng-template #item let-item let-options="options">
                         <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                             {{ item }}
                         </div>
@@ -52,33 +52,37 @@ export class LoaderDoc {
     [delay]="250"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
-            <div
-                class="flex items-center p-2"
-                [ngClass]="{ 'bg-surface-100 dark:bg-surface-700' : options.odd }"
-                style="height: 50px;">
-                    {{ item }}
+        <ng-template #item let-item let-options="options">
+            <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700' : options.odd }" style="height: 50px;">
+                {{ item }}
             </div>
         </ng-template>
 </p-virtualscroller>`,
 
-        html: `<div class="card flex justify-center">
-    <p-virtualscroller
-        [items]="items"
-        [itemSize]="50"
-        [showLoader]="true"
-        [delay]="250"
-        styleClass="border border-surface"
-        [style]="{'width': '200px', 'height': '200px'}">
-            <ng-template pTemplate="item" let-item let-options="options">
-                <div
-                    class="flex items-center p-2"
-                    [ngClass]="{ 'bg-surface-100 dark:bg-surface-700' : options.odd }"
-                    style="height: 50px;">
-                        {{ item }}
+        html: `<div class="card flex flex-wrap justify-center gap-4">
+    <div>
+        <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
+            <ng-template #item let-item let-options="options">
+                <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                    {{ item }}
+                </div>
+            </ng-template>
+        </p-virtualscroller>
+    </div>
+    <div>
+        <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
+            <ng-template #item let-item let-options="options">
+                <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                    {{ item }}
+                </div>
+            </ng-template>
+            <ng-template pTemplate="loader" let-options="options">
+                <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                    <p-skeleton [width]="options.even ? '60%' : '50%'" height="1.3rem"></p-skeleton>
                 </div>
             </ng-template>
-    </p-virtualscroller>
+        </p-virtualscroller>
+    </div>
 </div>`,
 
         typescript: `import { Component, OnInit } from '@angular/core';

diff --git a/apps/showcase/doc/scroller/programmaticdoc.ts b/apps/showcase/doc/scroller/programmaticdoc.ts
@@ -12,7 +12,7 @@ import { Scroller } from 'primeng/scroller';
         <div class="card flex flex-col items-center gap-4">
             <p-button label="Reset" (click)="reset()" />
             <p-virtualscroller #sc [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template pTemplate="item" let-item let-options="options">
+                <ng-template #item let-item let-options="options">
                     <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                         {{ item }}
                     </div>
@@ -44,12 +44,9 @@ export class ProgrammaticDoc implements OnInit {
     scrollHeight="200px"
     styleClass="border border-surface"
     [style]="{'width': '200px', 'height': '200px'}">
-        <ng-template pTemplate="item" let-item let-options="options">
-            <div
-                class="flex items-center p-2"
-                [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
-                style="height: 50px;">
-                    {{ item }}
+        <ng-template #item let-item let-options="options">
+            <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+                {{ item }}
             </div>
         </ng-template>
 </p-virtualscroller>`,
@@ -63,11 +60,8 @@ export class ProgrammaticDoc implements OnInit {
         scrollHeight="200px"
         styleClass="border border-surface"
         [style]="{'width': '200px', 'height': '200px'}">
-            <ng-template pTemplate="item" let-item let-options="options">
-                <div
-                class="flex items-center p-2"
-                [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }"
-                style="height: 50px;">
+            <ng-template #item let-item let-options="options">
+                <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
                     {{ item }}
                 </div>
             </ng-template>