52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
<div #container class="size-full overscroll-none">
|
|
@if (cards.length > 0) {
|
|
<p-virtualscroller
|
|
[items]="cards"
|
|
[itemSize]="580 / 4"
|
|
[lazy]="true"
|
|
[loading]="lazyLoading"
|
|
[appendOnly]="true"
|
|
(onLazyLoad)="onLazyLoad($event)"
|
|
styleClass="size-full"
|
|
>
|
|
<ng-template [appVirtualScroll]="cards" pTemplate="content" let-options="options">
|
|
<div class="flex flex-wrap justify-around">
|
|
@for (card of options.items; track card.id) {
|
|
<p-card styleClass="w-[24rem] h-[36rem] m-4 overflow-hidden">
|
|
<ng-template pTemplate="header">
|
|
<div
|
|
class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 z-10 overflow-hidden hover:h-[34rem] hover:translate-y-2 m-2 after:absolute after:inset-0 after:shadow-[inset_0_-10px_30px_15px_rgba(0,0,0,0.85)] after:content-[''] hover:inset-0"
|
|
>
|
|
<div class="absolute -inset-0">
|
|
<!--suppress AngularNgOptimizedImage -->
|
|
<img
|
|
alt="Card"
|
|
class="w-full h-full object-cover object-center"
|
|
src="http://localhost:8080{{ card.imageApiPath }}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template pTemplate="title"> {{ card.name }}</ng-template>
|
|
<ng-template pTemplate="subtitle"> Card subtitle</ng-template>
|
|
<ng-template pTemplate="footer">
|
|
<div class="flex gap-4 mt-1">
|
|
<p-button label="Cancel" severity="secondary" class="w-full" [outlined]="true" styleClass="w-full"/>
|
|
<p-button label="Save" class="w-full" styleClass="w-full"/>
|
|
</div>
|
|
</ng-template>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae
|
|
numquam deserunt
|
|
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
|
|
neque
|
|
quas!
|
|
</p>
|
|
</p-card>
|
|
}
|
|
</div>
|
|
</ng-template>
|
|
</p-virtualscroller>
|
|
}
|
|
</div>
|