add mediademo
This commit is contained in:
Çetin
parent
1f1f768cff
commit
1f451dc29b
@ -4,6 +4,7 @@ import {DashboardDemoComponent} from './demo/view/dashboarddemo.component';
|
||||
import {FormLayoutDemoComponent} from './demo/view/formlayoutdemo.component';
|
||||
import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
|
||||
import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
|
||||
import {MediaDemoComponent} from './demo/view/mediademo.component';
|
||||
import {MenusDemoComponent} from './demo/view/menusdemo.component';
|
||||
import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
|
||||
import {MiscDemoComponent} from './demo/view/miscdemo.component';
|
||||
@ -44,6 +45,7 @@ import {PaymentDemoComponent} from './demo/view/menu/paymentdemo.component';
|
||||
{path: 'uikit/tree', component: TreeDemoComponent},
|
||||
{path: 'uikit/panel', component: PanelsDemoComponent},
|
||||
{path: 'uikit/overlay', component: OverlaysDemoComponent},
|
||||
{path: 'uikit/media', component: MediaDemoComponent},
|
||||
{path: 'uikit/menu', component: MenusDemoComponent,
|
||||
children: [
|
||||
{path:'', component: PersonalDemoComponent},
|
||||
|
||||
@ -48,6 +48,7 @@ export class AppMenuComponent implements OnInit {
|
||||
{label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']},
|
||||
{label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']},
|
||||
{label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']},
|
||||
{label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']},
|
||||
{label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']},
|
||||
{label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']},
|
||||
{label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']},
|
||||
|
||||
@ -108,6 +108,7 @@ import {ListDemoComponent} from './demo/view/listdemo.component';
|
||||
import {TreeDemoComponent} from './demo/view/treedemo.component';
|
||||
import {PanelsDemoComponent} from './demo/view/panelsdemo.component';
|
||||
import {OverlaysDemoComponent} from './demo/view/overlaysdemo.component';
|
||||
import {MediaDemoComponent} from './demo/view/mediademo.component';
|
||||
import {MenusDemoComponent} from './demo/view/menusdemo.component';
|
||||
import {MessagesDemoComponent} from './demo/view/messagesdemo.component';
|
||||
import {MiscDemoComponent} from './demo/view/miscdemo.component';
|
||||
@ -268,7 +269,8 @@ FullCalendarModule.registerPlugins([
|
||||
SeatDemoComponent,
|
||||
PaymentDemoComponent,
|
||||
PersonalDemoComponent,
|
||||
ConfirmationDemoComponent
|
||||
ConfirmationDemoComponent,
|
||||
MediaDemoComponent
|
||||
],
|
||||
providers: [
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy},
|
||||
|
||||
52
src/app/demo/view/mediademo.component.html
Normal file
52
src/app/demo/view/mediademo.component.html
Normal file
@ -0,0 +1,52 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Carousel</h5>
|
||||
<p-carousel [value]="products" [numVisible]="3" [numScroll]="3" [circular]="false" [responsiveOptions]="carouselResponsiveOptions">
|
||||
<ng-template let-product pTemplate="item">
|
||||
<div class="border-round m-2 text-center p-2 shadow-1" style="border: 1px solid var(--surface-d)">
|
||||
<div class="my-3">
|
||||
<img src="assets/demo/images/product/{{product.image}}" [alt]="product.name" class="shadow-4" width="50%"/>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1">{{product.name}}</h5>
|
||||
<h6 class="mt-0 mb-3">${{product.price}}</h6>
|
||||
<span [class]="'product-badge status-'+product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
<div class="my-5">
|
||||
<button pButton pRipple icon="pi pi-search" class="mr-2 p-button-rounded"></button>
|
||||
<button pButton pRipple icon="pi pi-star-fill" class="mr-2 p-button-rounded p-button-success"></button>
|
||||
<button pButton pRipple icon="pi pi-cog" class="p-button-rounded p-button-info"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-carousel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<div class="flex justify-content-center">
|
||||
<p-image src="assets/demo/images/galleria/galleria10.jpg" alt="Image" width="250" [preview]="true"></p-image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Galleria</h5>
|
||||
<p-galleria [value]="images" [responsiveOptions]="galleriaResponsiveOptions"
|
||||
[containerStyle]="{'max-width': '800px', 'margin':'auto'}" [numVisible]="7" [circular]="true">
|
||||
<ng-template pTemplate="item" let-item>
|
||||
<img [src]="item.itemImageSrc" style="width: 100%; display: block;"/>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="thumbnail" let-item>
|
||||
<div class="grid nogutter justify-center">
|
||||
<img [src]="item.thumbnailImageSrc" style="display: block;"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-galleria>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
70
src/app/demo/view/mediademo.component.ts
Normal file
70
src/app/demo/view/mediademo.component.ts
Normal file
@ -0,0 +1,70 @@
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {ProductService} from '../service/productservice';
|
||||
import {PhotoService} from '../service/photoservice';
|
||||
import {Product} from '../domain/product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-mediademo',
|
||||
templateUrl: './mediademo.component.html',
|
||||
styleUrls: ['../../../assets/demo/badges.scss'],
|
||||
styles:[`
|
||||
:host ::ng-deep .p-carousel-indicators .p-link{
|
||||
border-radius:5px !important;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MediaDemoComponent implements OnInit {
|
||||
|
||||
products: Product[];
|
||||
|
||||
images: any[];
|
||||
|
||||
galleriaResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
];
|
||||
|
||||
carouselResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1,
|
||||
numScroll: 1
|
||||
}
|
||||
];
|
||||
|
||||
constructor(private productService: ProductService, private photoService: PhotoService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => {
|
||||
this.products = products;
|
||||
});
|
||||
|
||||
this.photoService.getImages().then(images => {
|
||||
this.images = images;
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user