carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update uikit components

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-07 11:38:04 +03:00
parent 078d0636b4
commit c89ea65b11
5 changed files with 191 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/uikit/mediadoc.ts
View File

@@ -9,52 +9,51 @@ import { Product, ProductService } from '@/src/service/demo/product.service';
import { PhotoService } from '@/src/service/demo/photo.service';
@Component({
standalone:true,
imports:[CommonModule, CarouselModule,ButtonModule,GalleriaModule, ImageModule, TagModule],
standalone: true,
imports: [CommonModule, CarouselModule, ButtonModule, GalleriaModule, ImageModule, TagModule],
template: `<div class="card">
<div class="font-semibold text-xl mb-4">Carousel</div>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
<ng-template let-product #item>
<div class="border border-surface rounded-border m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
<div class="font-semibold text-xl mb-4">Carousel</div>
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="galleriaResponsiveOptions">
<ng-template let-product #item>
<div class="border border-surface rounded-border m-2 p-4">
<div class="mb-4">
<div class="relative mx-auto">
<img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ product.image }}" [alt]="product.name" class="w-full rounded-border" />
<p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" class="absolute" styleClass="dark:!bg-surface-900" [ngStyle]="{ 'left.px': 5, 'top.px': 5 }" />
</div>
</div>
</div>
<div class="mb-4 font-medium">{{ product.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<div class="mb-4 font-medium">{{ product.name }}</div>
<div class="flex justify-between items-center">
<div class="mt-0 font-semibold text-xl">{{ '$' + product.price }}</div>
<span>
<p-button icon="pi pi-heart" severity="secondary" [outlined]="true" />
<p-button icon="pi pi-shopping-cart" styleClass="ml-2" />
</span>
</div>
</div>
</div>
</ng-template>
</p-carousel>
</div>
</ng-template>
</p-carousel>
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Image</div>
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Image</div>
<p-image src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg" alt="Image" width="250" />
</div>
<div class="card">
<div class="font-semibold text-xl mb-4">Galleria</div>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template #item let-item>
<img [src]="item.itemImageSrc" style="width:100%" />
</ng-template>
<ng-template #thumbnail let-item>
<img [src]="item.thumbnailImageSrc" />
</ng-template>
</p-galleria>
</div>`,
providers: [ProductService, PhotoService],
<div class="card">
<div class="font-semibold text-xl mb-4">Galleria</div>
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
<ng-template #item let-item>
<img [src]="item.itemImageSrc" style="width:100%" />
</ng-template>
<ng-template #thumbnail let-item>
<img [src]="item.thumbnailImageSrc" />
</ng-template>
</p-galleria>
</div>`,
providers: [ProductService, PhotoService]
})
export class MediaDoc implements OnInit {
products!: Product[];
images!: any[];
@@ -96,14 +95,17 @@ export class MediaDoc implements OnInit {
}
];
constructor(private productService: ProductService, private photoService: PhotoService) { }
constructor(
private productService: ProductService,
private photoService: PhotoService
) {}
ngOnInit() {
this.productService.getProductsSmall().then(products => {
this.productService.getProductsSmall().then((products) => {
this.products = products;
});
this.photoService.getImages().then(images => {
this.photoService.getImages().then((images) => {
this.images = images;
});
}
@@ -120,5 +122,4 @@ export class MediaDoc implements OnInit {
return 'success';
}
}
}