Update to new structure
This commit is contained in:
Çetin
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ButtonDemoComponent } from './buttondemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: ButtonDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ButtonDemoRoutingModule { }
|
||||
145
src/app/demo/components/uikit/button/buttondemo.component.html
Normal file
145
src/app/demo/components/uikit/button/buttondemo.component.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<button pButton pRipple label="Submit" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple label="Disabled" disabled="true" class="mr-2 mb-2"></button>
|
||||
<p-button label="Link" styleClass="p-button-link mr-2 mb-2"></p-button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Severities</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Text</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Outlined</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Button Set</h5>
|
||||
<span class="p-buttonset">
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
<button pButton pRipple label="Delete" icon="pi pi-trash"></button>
|
||||
<button pButton pRipple label="Cancel" icon="pi pi-times"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>SplitButton</h5>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h5>Templating</h5>
|
||||
<p-button styleClass="mr-2 mb-2 px-3">
|
||||
<img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
|
||||
</p-button>
|
||||
|
||||
<p-button styleClass="p-button-outlined mr-2 mb-2">
|
||||
<img alt="logo" src="https://primefaces.org/primeng/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
|
||||
<span class="ml-2 font-bold">PrimeNG</span>
|
||||
</p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Icons</h5>
|
||||
<button pButton pRipple icon="pi pi-star-fill" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-bookmark" class="mr-2 mb-2"></button>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Raised</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-raised mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded</h5>
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Icons</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Text</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Rounded Outlined</h5>
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2"></button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Loading</h5>
|
||||
<p-button label="Search" icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[0]" (onClick)="load(0)"></p-button>
|
||||
<p-button label="Search" icon="pi pi-search" iconPos="right" styleClass="mr-2 mb-2" [loading]="loading[1]" (onClick)="load(1)"></p-button>
|
||||
<p-button icon="pi pi-search" styleClass="mr-2 mb-2" [loading]="loading[2]" (onClick)="load(2)"></p-button>
|
||||
<p-button label="Search" styleClass="mr-2 mb-2" [loading]="loading[3]" (onClick)="load(3)"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
27
src/app/demo/components/uikit/button/buttondemo.component.ts
Normal file
27
src/app/demo/components/uikit/button/buttondemo.component.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './buttondemo.component.html'
|
||||
})
|
||||
export class ButtonDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[] = [];
|
||||
|
||||
loading = [false, false, false, false];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{ label: 'Update', icon: 'pi pi-refresh' },
|
||||
{ label: 'Delete', icon: 'pi pi-times' },
|
||||
{ label: 'Angular.io', icon: 'pi pi-info', url: 'http://angular.io' },
|
||||
{ separator: true },
|
||||
{ label: 'Setup', icon: 'pi pi-cog' }
|
||||
];
|
||||
}
|
||||
|
||||
load(index: number) {
|
||||
this.loading[index] = true;
|
||||
setTimeout(() => this.loading[index] = false, 1000);
|
||||
}
|
||||
}
|
||||
21
src/app/demo/components/uikit/button/buttondemo.module.ts
Normal file
21
src/app/demo/components/uikit/button/buttondemo.module.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ButtonDemoRoutingModule } from './buttondemo-routing.module';
|
||||
import { ButtonDemoComponent } from './buttondemo.component';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { SplitButtonModule } from 'primeng/splitbutton';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ButtonDemoRoutingModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
SplitButtonModule,
|
||||
ToggleButtonModule,
|
||||
],
|
||||
declarations: [ButtonDemoComponent]
|
||||
})
|
||||
export class ButtonDemoModule { }
|
||||
@@ -0,0 +1,12 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ChartsComponent } from './charts.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: ChartsComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ChartsRoutingModule { }
|
||||
34
src/app/demo/components/uikit/charts/charts.component.html
Normal file
34
src/app/demo/components/uikit/charts/charts.component.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Pie Chart</h5>
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Doughnut Chart</h5>
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions" [style]="{'width': '50%'}"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
268
src/app/demo/components/uikit/charts/charts.component.ts
Normal file
268
src/app/demo/components/uikit/charts/charts.component.ts
Normal file
@@ -0,0 +1,268 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './charts.component.html'
|
||||
})
|
||||
export class ChartsComponent implements OnInit, OnDestroy {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
subscription!: Subscription;
|
||||
|
||||
constructor(public layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$.subscribe(() => {
|
||||
this.initCharts();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initCharts();
|
||||
}
|
||||
|
||||
initCharts() {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--text-color');
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
this.barData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--green-600'),
|
||||
borderColor: documentStyle.getPropertyValue('--green-600'),
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary,
|
||||
font: {
|
||||
weight: 500
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
datasets: [
|
||||
{
|
||||
data: [540, 325, 702],
|
||||
backgroundColor: [
|
||||
documentStyle.getPropertyValue('--yellow-500'),
|
||||
documentStyle.getPropertyValue('--blue-500'),
|
||||
documentStyle.getPropertyValue('--pink-500')
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
documentStyle.getPropertyValue('--yellow-400'),
|
||||
documentStyle.getPropertyValue('--blue-400'),
|
||||
documentStyle.getPropertyValue('--red-400')
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.lineData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
tension: .4
|
||||
},
|
||||
{
|
||||
label: 'Second Dataset',
|
||||
data: [28, 48, 40, 19, 86, 27, 90],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--green-600'),
|
||||
borderColor: documentStyle.getPropertyValue('--green-600'),
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.polarData = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
3
|
||||
],
|
||||
backgroundColor: [
|
||||
documentStyle.getPropertyValue('--red-500'),
|
||||
documentStyle.getPropertyValue('--blue-500'),
|
||||
documentStyle.getPropertyValue('--yellow-500'),
|
||||
documentStyle.getPropertyValue('--green-500')
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
'Red',
|
||||
'Blue',
|
||||
'Yellow',
|
||||
'Green'
|
||||
]
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--red-500'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--red-500'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--red-500'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--red-500'),
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: textColorSecondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/app/demo/components/uikit/charts/charts.module.ts
Normal file
15
src/app/demo/components/uikit/charts/charts.module.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ChartModule } from 'primeng/chart'
|
||||
import { ChartsComponent } from './charts.component';
|
||||
import { ChartsRoutingModule } from './charts-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChartsRoutingModule,
|
||||
ChartModule
|
||||
],
|
||||
declarations: [ChartsComponent]
|
||||
})
|
||||
export class ChartsModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FileDemoComponent } from './filedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: FileDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FileDemoRoutingModule { }
|
||||
19
src/app/demo/components/uikit/file/filedemo.component.html
Normal file
19
src/app/demo/components/uikit/file/filedemo.component.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
|
||||
[multiple]="true" accept="image/*" [maxFileSize]="1000000">
|
||||
<ng-template pTemplate="content">
|
||||
<ul *ngIf="uploadedFiles.length">
|
||||
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
|
||||
</ul>
|
||||
</ng-template>
|
||||
</p-fileUpload>
|
||||
|
||||
<h5>Basic</h5>
|
||||
<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" [maxFileSize]="1000000" (onUpload)="onBasicUpload()"></p-fileUpload>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/demo/components/uikit/file/filedemo.component.ts
Normal file
25
src/app/demo/components/uikit/file/filedemo.component.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './filedemo.component.html',
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class FileDemoComponent {
|
||||
|
||||
uploadedFiles: any[] = [];
|
||||
|
||||
constructor(private messageService: MessageService) { }
|
||||
|
||||
onUpload(event: any) {
|
||||
for (const file of event.files) {
|
||||
this.uploadedFiles.push(file);
|
||||
}
|
||||
|
||||
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
|
||||
}
|
||||
|
||||
onBasicUpload() {
|
||||
this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
|
||||
}
|
||||
}
|
||||
17
src/app/demo/components/uikit/file/filedemo.module.ts
Normal file
17
src/app/demo/components/uikit/file/filedemo.module.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FileUploadModule } from 'primeng/fileupload';
|
||||
import { FileDemoRoutingModule } from './filedemo-routing.module';
|
||||
import { FileDemoComponent } from './filedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
FileDemoRoutingModule,
|
||||
FileUploadModule
|
||||
],
|
||||
declarations: [FileDemoComponent],
|
||||
})
|
||||
export class FileDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FloatLabelDemoComponent } from './floatlabeldemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: FloatLabelDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FloatlabelDemoRoutingModule { }
|
||||
@@ -0,0 +1,86 @@
|
||||
<div class="card">
|
||||
<h5>Float Label</h5>
|
||||
<p>All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.</p>
|
||||
<div class="grid p-fluid mt-3">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<input type="text" id="inputtext" pInputText [(ngModel)]="value1">
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
|
||||
(completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input type="text" id="lefticon" pInputText [(ngModel)]="value3">
|
||||
<label for="lefticon">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<input type="text" id="righticon" pInputText [(ngModel)]="value4">
|
||||
<label for="righticon">Right Icon</label>
|
||||
<i class="pi pi-spin pi-spinner"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-calendar inputId="calendar" [(ngModel)]="value5"></p-calendar>
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-chips inputId="chips" [(ngModel)]="value6"></p-chips>
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value7"></p-inputMask>
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputNumber inputId="inputnumber" [(ngModel)]="value8"></p-inputNumber>
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
</span>
|
||||
<span class="p-float-label">
|
||||
<input type="text" inputId="inputgroup" pInputText [(ngModel)]="value9">
|
||||
<label for="inputgroup">InputGroup</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value10" optionLabel="name"></p-dropdown>
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value11" optionLabel="name" [filter]="false"></p-multiSelect>
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value12" pInputTextarea></textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from 'src/app/demo/service/country.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './floatlabeldemo.component.html',
|
||||
})
|
||||
export class FloatLabelDemoComponent implements OnInit {
|
||||
|
||||
countries: any[] = [];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[] = [];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
value11: any;
|
||||
|
||||
value12: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event: any) {
|
||||
// in a real application, make a request to a remote url with the query and
|
||||
// return filtered results, for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
// tslint:disable-next-line:prefer-for-of
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FloatLabelDemoComponent } from './floatlabeldemo.component';
|
||||
import { FloatlabelDemoRoutingModule } from './floatlabeldemo-routing.module';
|
||||
import { AutoCompleteModule } from "primeng/autocomplete";
|
||||
import { CalendarModule } from "primeng/calendar";
|
||||
import { ChipsModule } from "primeng/chips";
|
||||
import { DropdownModule } from "primeng/dropdown";
|
||||
import { InputMaskModule } from "primeng/inputmask";
|
||||
import { InputNumberModule } from "primeng/inputnumber";
|
||||
import { CascadeSelectModule } from "primeng/cascadeselect";
|
||||
import { MultiSelectModule } from "primeng/multiselect";
|
||||
import { InputTextareaModule } from "primeng/inputtextarea";
|
||||
import { InputTextModule } from "primeng/inputtext";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
FloatlabelDemoRoutingModule,
|
||||
AutoCompleteModule,
|
||||
CalendarModule,
|
||||
ChipsModule,
|
||||
DropdownModule,
|
||||
InputMaskModule,
|
||||
InputNumberModule,
|
||||
CascadeSelectModule,
|
||||
MultiSelectModule,
|
||||
InputTextareaModule,
|
||||
InputTextModule
|
||||
],
|
||||
declarations: [FloatLabelDemoComponent]
|
||||
})
|
||||
export class FloatlabelDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FormLayoutComponent } from './formlayout.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: FormLayoutComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FormlayoutRoutingModule { }
|
||||
@@ -0,0 +1,108 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical</h5>
|
||||
<div class="field">
|
||||
<label htmlFor="name1">Name</label>
|
||||
<input pInputText id="name1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="email1">Email</label>
|
||||
<input pInputText id="email1" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="age1">Age</label>
|
||||
<input pInputText id="age1" type="text" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Vertical Grid</h5>
|
||||
<div class="p-formgrid grid">
|
||||
<div class="field col">
|
||||
<label htmlFor="name2">Name</label>
|
||||
<input pInputText id="name2" type="text" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<label htmlFor="email2">Email</label>
|
||||
<input pInputText id="email2" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Horizontal</h5>
|
||||
<div class="field grid">
|
||||
<label htmlFor="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="name3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field grid">
|
||||
<label htmlFor="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<input pInputText id="email3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label htmlFor="firstname1" class="p-sr-only">Firstname</label>
|
||||
<input pInputText id="firstname1" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label htmlFor="lastname1" class="p-sr-only">Lastname</label>
|
||||
<input pInputText id="lastname1" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<button pButton label="Submit"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input pInputText id="username" type="text" />
|
||||
<small>Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="firstname2">Firstname</label>
|
||||
<input pInputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="lastname2">Lastname</label>
|
||||
<input pInputText id="lastname2" type="text" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input pInputTextarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label htmlFor="city">City</label>
|
||||
<input pInputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="state">State</label>
|
||||
<p-dropdown [options]="dropdownItems" optionLabel="name" [(ngModel)]="selectedState"></p-dropdown>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label htmlFor="zip">Zip</label>
|
||||
<input pInputText id="zip" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './formlayout.component.html'
|
||||
})
|
||||
export class FormLayoutComponent {
|
||||
|
||||
selectedState: any;
|
||||
|
||||
dropdownItems = [
|
||||
{ name: 'Option 1', code: 'Option 1' },
|
||||
{ name: 'Option 2', code: 'Option 2' },
|
||||
{ name: 'Option 3', code: 'Option 3' }
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormLayoutComponent } from './formlayout.component';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { FormlayoutRoutingModule } from './formlayout-routing.module';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
DropdownModule,
|
||||
FormsModule,
|
||||
InputTextModule,
|
||||
InputTextareaModule,
|
||||
ButtonModule,
|
||||
FormlayoutRoutingModule
|
||||
],
|
||||
declarations: [FormLayoutComponent]
|
||||
})
|
||||
export class FormlayoutModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { InputDemoComponent } from './inputdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: InputDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class InputDemoRoutingModule { }
|
||||
214
src/app/demo/components/uikit/input/inputdemo.component.html
Normal file
214
src/app/demo/components/uikit/input/inputdemo.component.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Default">
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Disabled" [disabled]="true"/>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Invalid" class="ng-dirty ng-invalid"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user"></i>
|
||||
<input type="text" pInputText placeholder="Username"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-right">
|
||||
<input type="text" pInputText placeholder="Search"/>
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left p-input-icon-right">
|
||||
<i class="pi pi-user"></i>
|
||||
<input type="text" pInputText placeholder="Search"/>
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Float Label</h5>
|
||||
<span class="p-float-label">
|
||||
<input id="float-input" type="text" pInputText>
|
||||
<label for="float-input">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Textarea</h5>
|
||||
<textarea rows="5" cols="30" placeholder="Your Message" pInputTextarea></textarea>
|
||||
|
||||
<h5>AutoComplete</h5>
|
||||
<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
|
||||
</p-autoComplete>
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<p-calendar [showIcon]="true" inputId="icon"></p-calendar>
|
||||
|
||||
<h5>InputNumber</h5>
|
||||
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
|
||||
</p-inputNumber>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<p-chips></p-chips>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h5>Slider</h5>
|
||||
<input type="text" pInputText [(ngModel)]="valSlider" readonly/>
|
||||
<p-slider [(ngModel)]="valSlider"></p-slider>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<p-rating></p-rating>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h5>Knob</h5>
|
||||
<p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
|
||||
id="city2"></p-radioButton>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
|
||||
<label for="ny">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
|
||||
<label for="sf">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
|
||||
<label for="la">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Input Switch</h5>
|
||||
<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Listbox</h5>
|
||||
<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
|
||||
|
||||
<h5>Dropdown</h5>
|
||||
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
|
||||
|
||||
|
||||
<h5>Multiselect</h5>
|
||||
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
|
||||
<ng-template let-value pTemplate="selectedItems">
|
||||
<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<div *ngIf="!selectedMulti || selectedMulti.length === 0" class="country-placeholder">
|
||||
Select Countries
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-country pTemplate="item">
|
||||
<div class="country-item">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
|
||||
<div>{{country.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{'width': '10em'}"></p-toggleButton>
|
||||
|
||||
<h5>SelectOneButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
|
||||
|
||||
<h5>SelectManyButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" [multiple]="true" optionLabel="name"></p-selectButton>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>InputGroup</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
|
||||
<input type="text" pInputText placeholder="Price">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<button type="button" pButton pRipple label="Search"></button>
|
||||
<input type="text" pInputText placeholder="Keyword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><p-checkbox></p-checkbox></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
124
src/app/demo/components/uikit/input/inputdemo.component.ts
Normal file
124
src/app/demo/components/uikit/input/inputdemo.component.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { SelectItem } from 'primeng/api';
|
||||
import { CountryService } from 'src/app/demo/service/country.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './inputdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-multiselect {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .p-multiselect-label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item img.flag {
|
||||
width: 18px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-placeholder {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-colorpicker {
|
||||
width: 2.5em
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class InputDemoComponent implements OnInit {
|
||||
countries: any[] = [];
|
||||
|
||||
filteredCountries: any[] = [];
|
||||
|
||||
selectedCountryAdvanced: any[] = [];
|
||||
|
||||
valSlider = 50;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string = '';
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean = false;
|
||||
|
||||
cities: SelectItem[] = [];
|
||||
|
||||
selectedList: SelectItem = { value: '' };
|
||||
|
||||
selectedDrop: SelectItem = { value: '' };
|
||||
|
||||
selectedMulti: any[] = [];
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[] = [];
|
||||
|
||||
valSelect1: string = "";
|
||||
|
||||
valSelect2: string = "";
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
constructor(private countryService: CountryService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
|
||||
this.cities = [
|
||||
{ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } },
|
||||
{ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } },
|
||||
{ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } },
|
||||
{ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } },
|
||||
{ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }
|
||||
];
|
||||
|
||||
this.paymentOptions = [
|
||||
{ name: 'Option 1', value: 1 },
|
||||
{ name: 'Option 2', value: 2 },
|
||||
{ name: 'Option 3', value: 3 }
|
||||
];
|
||||
}
|
||||
|
||||
filterCountry(event: any) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
59
src/app/demo/components/uikit/input/inputdemo.module.ts
Normal file
59
src/app/demo/components/uikit/input/inputdemo.module.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { InputDemoComponent } from './inputdemo.component';
|
||||
import { InputDemoRoutingModule } from './inputdemo-routing.module';
|
||||
import { AutoCompleteModule } from "primeng/autocomplete";
|
||||
import { CalendarModule } from "primeng/calendar";
|
||||
import { ChipsModule } from "primeng/chips";
|
||||
import { ChipModule } from "primeng/chip";
|
||||
import { DropdownModule } from "primeng/dropdown";
|
||||
import { InputMaskModule } from "primeng/inputmask";
|
||||
import { InputNumberModule } from "primeng/inputnumber";
|
||||
import { CascadeSelectModule } from "primeng/cascadeselect";
|
||||
import { MultiSelectModule } from "primeng/multiselect";
|
||||
import { InputTextareaModule } from "primeng/inputtextarea";
|
||||
import { InputTextModule } from "primeng/inputtext";
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { KnobModule } from 'primeng/knob';
|
||||
import { ListboxModule } from 'primeng/listbox';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { ColorPickerModule } from 'primeng/colorpicker';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { SliderModule } from 'primeng/slider';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
InputDemoRoutingModule,
|
||||
AutoCompleteModule,
|
||||
CalendarModule,
|
||||
ChipsModule,
|
||||
DropdownModule,
|
||||
InputMaskModule,
|
||||
InputNumberModule,
|
||||
ColorPickerModule,
|
||||
CascadeSelectModule,
|
||||
MultiSelectModule,
|
||||
ToggleButtonModule,
|
||||
SliderModule,
|
||||
InputTextareaModule,
|
||||
RadioButtonModule,
|
||||
InputTextModule,
|
||||
RatingModule,
|
||||
ChipModule,
|
||||
KnobModule,
|
||||
InputSwitchModule,
|
||||
ListboxModule,
|
||||
SelectButtonModule,
|
||||
CheckboxModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [InputDemoComponent]
|
||||
})
|
||||
export class InputDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { InvalidStateDemoComponent } from './invalidstatedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: InvalidStateDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class InvalidStateDemoRoutingModule { }
|
||||
@@ -0,0 +1,53 @@
|
||||
<div class="card">
|
||||
<h5>Invalid State</h5>
|
||||
<p>All form components have an invalid state style to display the validation errors when ng-invalid ng-dirty combination is applied by Angular.</p>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field mt-3">
|
||||
<label for="inputtext">InputText</label>
|
||||
<input type="text" id="inputtext" pInputText class="ng-invalid ng-dirty">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
<p-autoComplete inputId="autocomplete" [(ngModel)]="value1" [suggestions]="filteredCountries" (completeMethod)="searchCountry($event)" field="name" class="ng-invalid ng-dirty"></p-autoComplete>
|
||||
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="calendar">Calendar</label>
|
||||
<p-calendar inputId="calendar" [(ngModel)]="value2" class="ng-invalid ng-dirty" [showIcon]="true"></p-calendar>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="chips">Chips</label>
|
||||
<p-chips inputId="chips" [(ngModel)]="value3" class="ng-invalid ng-dirty"></p-chips>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<p-password [(ngModel)]="value8" class="ng-invalid ng-dirty"></p-password>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field mt-3">
|
||||
<label for="inputmask">InputMask</label>
|
||||
<p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5" class="ng-invalid ng-dirty"></p-inputMask>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
<p-inputNumber inputId="inputnumber" [(ngModel)]="value6" class="ng-invalid ng-dirty"></p-inputNumber>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="dropdown">Dropdown</label>
|
||||
<p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value9" optionLabel="name" class="ng-invalid ng-dirty"></p-dropdown>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
<p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value10" optionLabel="name" [filter]="false" class="ng-invalid ng-dirty"></p-multiSelect>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="textarea">Textarea</label>
|
||||
<textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value4" pInputTextarea class="ng-invalid ng-dirty"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CountryService } from 'src/app/demo/service/country.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './invalidstatedemo.component.html'
|
||||
})
|
||||
export class InvalidStateDemoComponent implements OnInit {
|
||||
|
||||
countries: any[] = [];
|
||||
|
||||
cities: any[];
|
||||
|
||||
filteredCountries: any[] = [];
|
||||
|
||||
value1: any;
|
||||
|
||||
value2: any;
|
||||
|
||||
value3: any;
|
||||
|
||||
value4: any;
|
||||
|
||||
value5: any;
|
||||
|
||||
value6: any;
|
||||
|
||||
value7: any;
|
||||
|
||||
value8: any;
|
||||
|
||||
value9: any;
|
||||
|
||||
value10: any;
|
||||
|
||||
constructor(private countryService: CountryService) {
|
||||
this.cities = [
|
||||
{ name: 'New York', code: 'NY' },
|
||||
{ name: 'Rome', code: 'RM' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Paris', code: 'PRS' }
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
}
|
||||
|
||||
searchCountry(event: any) {
|
||||
// in a real application, make a request to a remote url with the query and return filtered results,
|
||||
// for demo we filter at client side
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { InvalidStateDemoComponent } from './invalidstatedemo.component';
|
||||
import { InvalidStateDemoRoutingModule } from './invalidstatedemo-routing.module';
|
||||
import { AutoCompleteModule } from "primeng/autocomplete";
|
||||
import { CalendarModule } from "primeng/calendar";
|
||||
import { ChipsModule } from "primeng/chips";
|
||||
import { DropdownModule } from "primeng/dropdown";
|
||||
import { InputMaskModule } from "primeng/inputmask";
|
||||
import { InputNumberModule } from "primeng/inputnumber";
|
||||
import { CascadeSelectModule } from "primeng/cascadeselect";
|
||||
import { MultiSelectModule } from "primeng/multiselect";
|
||||
import { InputTextareaModule } from "primeng/inputtextarea";
|
||||
import { InputTextModule } from "primeng/inputtext";
|
||||
import { PasswordModule } from "primeng/password";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
InvalidStateDemoRoutingModule,
|
||||
AutoCompleteModule,
|
||||
CalendarModule,
|
||||
ChipsModule,
|
||||
DropdownModule,
|
||||
InputMaskModule,
|
||||
InputNumberModule,
|
||||
CascadeSelectModule,
|
||||
MultiSelectModule,
|
||||
PasswordModule,
|
||||
InputTextareaModule,
|
||||
InputTextModule
|
||||
],
|
||||
declarations: [InvalidStateDemoComponent]
|
||||
})
|
||||
export class InvalidStateDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ListDemoComponent } from './listdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: ListDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ListDemoRoutingModule { }
|
||||
88
src/app/demo/components/uikit/list/listdemo.component.html
Normal file
88
src/app/demo/components/uikit/list/listdemo.component.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>DataView</h5>
|
||||
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name" [sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="grid grid-nogutter flex-column md:flex-row justify-content-between">
|
||||
<p-dropdown [options]="sortOptions" placeholder="Sort By Price" (onChange)="onSortChange($event)"></p-dropdown>
|
||||
<span class="p-input-icon-left mb-2 md:mb-0">
|
||||
<i class="pi pi-search"></i>
|
||||
<input type="search" pInputText placeholder="Search by Name" (input)="onFilter(dv, $event)">
|
||||
</span>
|
||||
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template let-product pTemplate="listItem">
|
||||
<div class="col-12">
|
||||
<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
<div class="font-bold text-2xl">{{product.name}}</div>
|
||||
<div class="mb-3">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
<div class="flex align-items-center mt-2">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
|
||||
<span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></p-button>
|
||||
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template let-product pTemplate="gridItem">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card m-3 border-1 surface-border">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-tag mr-2"></i>
|
||||
<span class="font-semibold">{{product.category}}</span>
|
||||
</div>
|
||||
<span [class]="'sm:ml-2 product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="w-9 shadow-2 my-3 mx-0"/>
|
||||
<div class="text-2xl font-bold">{{product.name}}</div>
|
||||
<div class="mb-3">{{product.description}}</div>
|
||||
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span class="text-2xl font-semibold">${{product.price}}</span>
|
||||
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-dataView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>PickList</h5>
|
||||
<p-pickList [source]="sourceCities" [target]="targetCities" sourceHeader="From" targetHeader="To" [dragdrop]="true"
|
||||
[responsive]="true" [sourceStyle]="{'height':'250px'}" [targetStyle]="{'height':'250px'}">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-pickList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>OrderList</h5>
|
||||
<p-orderList [value]="orderCities" header="Cities" [dragdrop]="true" [listStyle]="{'height':'250px'}">
|
||||
<ng-template let-city pTemplate="item">
|
||||
<div>{{city.name}}</div>
|
||||
</ng-template>
|
||||
</p-orderList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
72
src/app/demo/components/uikit/list/listdemo.component.ts
Normal file
72
src/app/demo/components/uikit/list/listdemo.component.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { SelectItem } from 'primeng/api';
|
||||
import { DataView } from 'primeng/dataview';
|
||||
import { Product } from 'src/app/demo/api/product';
|
||||
import { ProductService } from 'src/app/demo/service/product.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './listdemo.component.html'
|
||||
})
|
||||
export class ListDemoComponent implements OnInit {
|
||||
|
||||
products: Product[] = [];
|
||||
|
||||
sortOptions: SelectItem[] = [];
|
||||
|
||||
sortOrder: number = 0;
|
||||
|
||||
sortField: string = '';
|
||||
|
||||
sourceCities: any[] = [];
|
||||
|
||||
targetCities: any[] = [];
|
||||
|
||||
orderCities: any[] = [];
|
||||
|
||||
constructor(private productService: ProductService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProducts().then(data => this.products = data);
|
||||
|
||||
this.sourceCities = [
|
||||
{ name: 'San Francisco', code: 'SF' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Berlin', code: 'BRL' },
|
||||
{ name: 'Barcelona', code: 'BRC' },
|
||||
{ name: 'Rome', code: 'RM' }];
|
||||
|
||||
this.targetCities = [];
|
||||
|
||||
this.orderCities = [
|
||||
{ name: 'San Francisco', code: 'SF' },
|
||||
{ name: 'London', code: 'LDN' },
|
||||
{ name: 'Paris', code: 'PRS' },
|
||||
{ name: 'Istanbul', code: 'IST' },
|
||||
{ name: 'Berlin', code: 'BRL' },
|
||||
{ name: 'Barcelona', code: 'BRC' },
|
||||
{ name: 'Rome', code: 'RM' }];
|
||||
|
||||
this.sortOptions = [
|
||||
{ label: 'Price High to Low', value: '!price' },
|
||||
{ label: 'Price Low to High', value: 'price' }
|
||||
];
|
||||
}
|
||||
|
||||
onSortChange(event: any) {
|
||||
const value = event.value;
|
||||
|
||||
if (value.indexOf('!') === 0) {
|
||||
this.sortOrder = -1;
|
||||
this.sortField = value.substring(1, value.length);
|
||||
} else {
|
||||
this.sortOrder = 1;
|
||||
this.sortField = value;
|
||||
}
|
||||
}
|
||||
|
||||
onFilter(dv: DataView, event: Event) {
|
||||
dv.filter((event.target as HTMLInputElement).value);
|
||||
}
|
||||
}
|
||||
29
src/app/demo/components/uikit/list/listdemo.module.ts
Normal file
29
src/app/demo/components/uikit/list/listdemo.module.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ListDemoComponent } from './listdemo.component';
|
||||
import { ListDemoRoutingModule } from './listdemo-routing.module';
|
||||
import { DataViewModule } from 'primeng/dataview';
|
||||
import { PickListModule } from 'primeng/picklist';
|
||||
import { OrderListModule } from 'primeng/orderlist';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
ListDemoRoutingModule,
|
||||
DataViewModule,
|
||||
PickListModule,
|
||||
OrderListModule,
|
||||
InputTextModule,
|
||||
DropdownModule,
|
||||
RatingModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [ListDemoComponent]
|
||||
})
|
||||
export class ListDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MediaDemoComponent } from './mediademo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: MediaDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MediaDemoRoutingModule { }
|
||||
52
src/app/demo/components/uikit/media/mediademo.component.html
Normal file
52
src/app/demo/components/uikit/media/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" style="border: 1px solid var(--surface-d)">
|
||||
<div class="my-5">
|
||||
<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]="6" [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>
|
||||
63
src/app/demo/components/uikit/media/mediademo.component.ts
Normal file
63
src/app/demo/components/uikit/media/mediademo.component.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Product } from 'src/app/demo/api/product';
|
||||
import { PhotoService } from 'src/app/demo/service/photo.service';
|
||||
import { ProductService } from 'src/app/demo/service/product.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './mediademo.component.html'
|
||||
})
|
||||
export class MediaDemoComponent implements OnInit {
|
||||
|
||||
products!: Product[];
|
||||
|
||||
images!: any[];
|
||||
|
||||
galleriaResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 5
|
||||
},
|
||||
{
|
||||
breakpoint: '960px',
|
||||
numVisible: 4
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '560px',
|
||||
numVisible: 1
|
||||
}
|
||||
];
|
||||
|
||||
carouselResponsiveOptions: any[] = [
|
||||
{
|
||||
breakpoint: '1024px',
|
||||
numVisible: 3,
|
||||
numScroll: 3
|
||||
},
|
||||
{
|
||||
breakpoint: '768px',
|
||||
numVisible: 2,
|
||||
numScroll: 2
|
||||
},
|
||||
{
|
||||
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;
|
||||
});
|
||||
}
|
||||
}
|
||||
21
src/app/demo/components/uikit/media/mediademo.module.ts
Normal file
21
src/app/demo/components/uikit/media/mediademo.module.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MediaDemoComponent } from './mediademo.component';
|
||||
import { MediaDemoRoutingModule } from './mediademo-routing.module';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { ImageModule } from 'primeng/image';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { CarouselModule } from 'primeng/carousel';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MediaDemoRoutingModule,
|
||||
ButtonModule,
|
||||
ImageModule,
|
||||
GalleriaModule,
|
||||
CarouselModule
|
||||
],
|
||||
declarations: [MediaDemoComponent]
|
||||
})
|
||||
export class MediaDemoModule { }
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-check mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Confirmation Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class ConfirmationComponent { }
|
||||
84
src/app/demo/components/uikit/menus/menus.component.html
Normal file
84
src/app/demo/components/uikit/menus/menus.component.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title">
|
||||
<h5>MenuBar</h5>
|
||||
<p-menubar [model]="tieredItems">
|
||||
<ng-template pTemplate="end">
|
||||
<span class="p-input-icon-right">
|
||||
<input type="text" pInputText placeholder="Search">
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</ng-template>
|
||||
</p-menubar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title">
|
||||
<h5>Breadcrumb</h5>
|
||||
<p-breadcrumb [model]="breadcrumbItems" [home]="{icon: 'pi pi-home'}"></p-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card card-w-title flex flex-wrap">
|
||||
<div class="col-12 md:col-8 h-full">
|
||||
<h5>TabMenu</h5>
|
||||
<p-tabMenu styleClass="mb-5" [model]="routeItems"></p-tabMenu>
|
||||
|
||||
<h5>Steps</h5>
|
||||
<p-steps [model]="routeItems" styleClass="mt-5" [readonly]="false"></p-steps>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mt-5 md:mt-0">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card card-w-title">
|
||||
<h5>TieredMenu</h5>
|
||||
<p-tieredMenu [model]="tieredItems"></p-tieredMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card card-w-title">
|
||||
<h5>Plain Menu</h5>
|
||||
<p-menu [model]="plainMenuItems"></p-menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
|
||||
<div class="card card-w-title">
|
||||
<h5>Overlay Menu</h5>
|
||||
|
||||
<p-menu #menu [popup]="true" [model]="menuItems"></p-menu>
|
||||
<button type="button" pButton icon="pi pi-chevron-down" label="Options" (click)="menu.toggle($event)" style="width:auto"></button>
|
||||
</div>
|
||||
|
||||
<div class="card card-w-title" #anchor>
|
||||
<h5>ContextMenu</h5>
|
||||
Right click to display.
|
||||
<p-contextMenu [target]="anchor" [model]="menuItems"></p-contextMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card card-w-title">
|
||||
<h5>MegaMenu - Horizontal</h5>
|
||||
<p-megaMenu [model]="megaMenuItems"></p-megaMenu>
|
||||
|
||||
<h5>MegaMenu - Vertical</h5>
|
||||
<p-megaMenu [model]="megaMenuItems" orientation="vertical" [style]="{'width':'200px'}"></p-megaMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card card-w-title">
|
||||
<h5>PanelMenu</h5>
|
||||
<p-panelMenu [model]="panelMenuItems"></p-panelMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
472
src/app/demo/components/uikit/menus/menus.component.ts
Normal file
472
src/app/demo/components/uikit/menus/menus.component.ts
Normal file
@@ -0,0 +1,472 @@
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { MegaMenuItem, MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './menus.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MenusComponent implements OnInit {
|
||||
|
||||
breadcrumbItems!: MenuItem[];
|
||||
|
||||
tieredItems!: MenuItem[];
|
||||
|
||||
items!: MenuItem[];
|
||||
|
||||
routeItems!: MenuItem[];
|
||||
|
||||
megaMenuItems!: MegaMenuItem[];
|
||||
|
||||
panelMenuItems!: MenuItem[];
|
||||
|
||||
stepsItems!: MenuItem[];
|
||||
|
||||
slideItems!: MenuItem[];
|
||||
|
||||
menuItems!: MenuItem[];
|
||||
|
||||
plainMenuItems!: MenuItem[];
|
||||
|
||||
pageIndex: number = 0;
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.tieredItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: 'Quit',
|
||||
icon: 'pi pi-fw pi-sign-out'
|
||||
}
|
||||
];
|
||||
|
||||
this.items = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.menuItems = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Home', icon: 'pi pi-fw pi-home'
|
||||
},
|
||||
];
|
||||
|
||||
this.slideItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
icon: 'pi pi-fw pi-table',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: 'pi pi-fw pi-shopping-cart',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
icon: 'pi pi-fw pi-envelope',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.plainMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
this.breadcrumbItems = [];
|
||||
this.breadcrumbItems.push({ label: 'Electronics' });
|
||||
this.breadcrumbItems.push({ label: 'Computer' });
|
||||
this.breadcrumbItems.push({ label: 'Notebook' });
|
||||
this.breadcrumbItems.push({ label: 'Accessories' });
|
||||
this.breadcrumbItems.push({ label: 'Backpacks' });
|
||||
this.breadcrumbItems.push({ label: 'Item' });
|
||||
|
||||
this.routeItems = [
|
||||
{ label: 'Personal', routerLink: 'personal' },
|
||||
{ label: 'Seat', routerLink: 'seat' },
|
||||
{ label: 'Payment', routerLink: 'payment' },
|
||||
{ label: 'Confirmation', routerLink: 'confirmation' },
|
||||
];
|
||||
|
||||
this.megaMenuItems = [
|
||||
{
|
||||
label: 'Fashion', icon: 'pi pi-fw pi-tag',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Women',
|
||||
items: [{ label: 'Women Item' }, { label: 'Women Item' }, { label: 'Women Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Men',
|
||||
items: [{ label: 'Men Item' }, { label: 'Men Item' }, { label: 'Men Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Kids',
|
||||
items: [{ label: 'Kids Item' }, { label: 'Kids Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Luggage',
|
||||
items: [{ label: 'Luggage Item' }, { label: 'Luggage Item' }, { label: 'Luggage Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Electronics', icon: 'pi pi-fw pi-desktop',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Computer',
|
||||
items: [{ label: 'Computer Item' }, { label: 'Computer Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Camcorder',
|
||||
items: [{ label: 'Camcorder Item' }, { label: 'Camcorder Item' }, { label: 'Camcorder Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'TV',
|
||||
items: [{ label: 'TV Item' }, { label: 'TV Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Audio',
|
||||
items: [{ label: 'Audio Item' }, { label: 'Audio Item' }, { label: 'Audio Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Sports.7',
|
||||
items: [{ label: 'Sports.7.1' }, { label: 'Sports.7.2' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Furniture', icon: 'pi pi-fw pi-image',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Living Room',
|
||||
items: [{ label: 'Living Room Item' }, { label: 'Living Room Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Kitchen',
|
||||
items: [{ label: 'Kitchen Item' }, { label: 'Kitchen Item' }, { label: 'Kitchen Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Bedroom',
|
||||
items: [{ label: 'Bedroom Item' }, { label: 'Bedroom Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Outdoor',
|
||||
items: [{ label: 'Outdoor Item' }, { label: 'Outdoor Item' }, { label: 'Outdoor Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Sports', icon: 'pi pi-fw pi-star',
|
||||
items: [
|
||||
[
|
||||
{
|
||||
label: 'Basketball',
|
||||
items: [{ label: 'Basketball Item' }, { label: 'Basketball Item' }]
|
||||
},
|
||||
{
|
||||
label: 'Football',
|
||||
items: [{ label: 'Football Item' }, { label: 'Football Item' }, { label: 'Football Item' }]
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
label: 'Tennis',
|
||||
items: [{ label: 'Tennis Item' }, { label: 'Tennis Item' }]
|
||||
}
|
||||
]
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
this.panelMenuItems = [
|
||||
{
|
||||
label: 'Customers',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon: 'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Customer',
|
||||
icon: 'pi pi-fw pi-plus'
|
||||
},
|
||||
{
|
||||
label: 'Duplicate',
|
||||
icon: 'pi pi-fw pi-copy'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: 'pi pi-fw pi-user-edit'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
items: [
|
||||
{
|
||||
label: 'View',
|
||||
icon: 'pi pi-fw pi-list'
|
||||
},
|
||||
{
|
||||
label: 'Search',
|
||||
icon: 'pi pi-fw pi-search'
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Shipments',
|
||||
items: [
|
||||
{
|
||||
label: 'Tracker',
|
||||
icon: 'pi pi-fw pi-compass',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Map',
|
||||
icon: 'pi pi-fw pi-map-marker',
|
||||
|
||||
},
|
||||
{
|
||||
label: 'Manage',
|
||||
icon: 'pi pi-fw pi-pencil'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Profile',
|
||||
items: [
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: 'pi pi-fw pi-cog'
|
||||
},
|
||||
{
|
||||
label: 'Billing',
|
||||
icon: 'pi pi-fw pi-file'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
54
src/app/demo/components/uikit/menus/menus.module.ts
Normal file
54
src/app/demo/components/uikit/menus/menus.module.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { PaymentComponent } from './payment.component';
|
||||
import { SeatComponent } from './seat.component';
|
||||
import { PersonalComponent } from './personal.component';
|
||||
import { ConfirmationComponent } from './confirmation.component';
|
||||
import { MenusComponent } from './menus.component';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
import { MegaMenuModule } from 'primeng/megamenu';
|
||||
import { PanelMenuModule } from 'primeng/panelmenu';
|
||||
import { TieredMenuModule } from 'primeng/tieredmenu';
|
||||
import { MenubarModule } from 'primeng/menubar';
|
||||
import { BreadcrumbModule } from 'primeng/breadcrumb';
|
||||
import { TabMenuModule } from 'primeng/tabmenu';
|
||||
import { ContextMenuModule } from 'primeng/contextmenu';
|
||||
import { StepsModule } from 'primeng/steps';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MenusComponent,
|
||||
PaymentComponent,
|
||||
ConfirmationComponent,
|
||||
PersonalComponent,
|
||||
SeatComponent,
|
||||
|
||||
],
|
||||
imports: [
|
||||
MenuModule,
|
||||
MegaMenuModule,
|
||||
PanelMenuModule,
|
||||
MenubarModule,
|
||||
BreadcrumbModule,
|
||||
InputTextModule,
|
||||
TieredMenuModule,
|
||||
TabMenuModule,
|
||||
ContextMenuModule,
|
||||
StepsModule,
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: '', component: MenusComponent, children: [
|
||||
{ path: '', redirectTo: 'personal', pathMatch: 'full' },
|
||||
{ path: 'personal', component: PersonalComponent },
|
||||
{ path: 'confirmation', component: ConfirmationComponent },
|
||||
{ path: 'seat', component: SeatComponent },
|
||||
{ path: 'payment', component: PaymentComponent }
|
||||
]
|
||||
}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MenusModule { }
|
||||
|
||||
12
src/app/demo/components/uikit/menus/payment.component.ts
Normal file
12
src/app/demo/components/uikit/menus/payment.component.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-money-bill mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Payment Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PaymentComponent { }
|
||||
12
src/app/demo/components/uikit/menus/personal.component.ts
Normal file
12
src/app/demo/components/uikit/menus/personal.component.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-personal',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-user mr-2 text-2xl"></i>
|
||||
<p class="mt-5 text-center text-lg">Personal Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class PersonalComponent { }
|
||||
12
src/app/demo/components/uikit/menus/seat.component.ts
Normal file
12
src/app/demo/components/uikit/menus/seat.component.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-seat',
|
||||
template: `
|
||||
<div class="flex flex-column align-items-center justify-content-center h-full py-5 px-3">
|
||||
<i class="pi pi-fw pi-ticket mr-2 text-2xl"></i>
|
||||
<p class="m-0 mt-5 text-center text-lg">Seat Component Content via Child Route</p>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
export class SeatComponent { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MessagesDemoComponent } from './messagesdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: MessagesDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MessagesDemoRoutingModule { }
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Toast</h5>
|
||||
<p-toast key="tst" [baseZIndex]="99999"></p-toast>
|
||||
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card z-3">
|
||||
<h5>Messages</h5>
|
||||
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success mr-2"></button>
|
||||
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info mr-2"></button>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning mr-2"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="field grid">
|
||||
<label for="username" class="col-fixed w-9rem">Username</label>
|
||||
<div class="col">
|
||||
<input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error" text="Field is required"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field grid">
|
||||
<label for="email" class="col-fixed w-9rem">Email</label>
|
||||
<div class="col">
|
||||
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid mr-2">
|
||||
<p-message severity="error"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="field p-fluid">
|
||||
<label for="username2">Username</label>
|
||||
<input id="username2" type="username" aria-describedby="username-help" class="ng-dirty ng-invalid" pInputText />
|
||||
<small id="username-help" class="p-error">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Message, MessageService } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './messagesdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-message {
|
||||
margin-left: .25em;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-toast{
|
||||
z-index:99999;
|
||||
}
|
||||
`],
|
||||
providers: [MessageService]
|
||||
})
|
||||
export class MessagesDemoComponent {
|
||||
|
||||
msgs: Message[] = [];
|
||||
|
||||
constructor(private service: MessageService) { }
|
||||
|
||||
showInfoViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
}
|
||||
|
||||
showWarnViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
|
||||
}
|
||||
|
||||
showErrorViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaToast() {
|
||||
this.service.add({ key: 'tst', severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
|
||||
showInfoViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'info', summary: 'Info Message', detail: 'PrimeNG rocks' });
|
||||
}
|
||||
|
||||
showWarnViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
|
||||
}
|
||||
|
||||
showErrorViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
|
||||
}
|
||||
|
||||
showSuccessViaMessages() {
|
||||
this.msgs = [];
|
||||
this.msgs.push({ severity: 'success', summary: 'Success Message', detail: 'Message sent' });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MessagesDemoComponent } from './messagesdemo.component';
|
||||
import { MessagesDemoRoutingModule } from './messagesdemo-routing.module';
|
||||
import { MessagesModule } from 'primeng/messages';
|
||||
import { MessageModule } from 'primeng/message';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MessagesDemoRoutingModule,
|
||||
MessagesModule,
|
||||
MessageModule,
|
||||
ButtonModule,
|
||||
ToastModule,
|
||||
InputTextModule
|
||||
],
|
||||
declarations: [MessagesDemoComponent]
|
||||
})
|
||||
export class MessagesDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { MiscDemoComponent } from './miscdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: MiscDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class MiscDemoRoutingModule { }
|
||||
165
src/app/demo/components/uikit/misc/miscdemo.component.html
Normal file
165
src/app/demo/components/uikit/misc/miscdemo.component.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>ProgressBar</h5>
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<p-progressBar [value]="value" [showValue]="true"></p-progressBar>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Badge</h4>
|
||||
<h5>Numbers</h5>
|
||||
<div>
|
||||
<p-badge value="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="8" severity="success" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="4" severity="info" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="12" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="3" severity="danger"></p-badge>
|
||||
</div>
|
||||
|
||||
<h5>Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" pBadge style="font-size: 2rem" value="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" pBadge style="font-size: 2rem" [value]="'10+'" severity="danger"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" pBadge style="font-size: 2rem" severity="danger"></i>
|
||||
|
||||
|
||||
<h5>Inline Button Badge</h5>
|
||||
<p-button label="Emails" badge="8" styleClass="mr-2"></p-button>
|
||||
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<div>
|
||||
<p-badge value="2" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="4" size="large" severity="warning" styleClass="mr-2"></p-badge>
|
||||
<p-badge value="6" size="xlarge" severity="success" styleClass="mr-2"></p-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Avatar</h4>
|
||||
<h5>Avatar Group</h5>
|
||||
<p-avatarGroup styleClass="mb-3">
|
||||
<p-avatar image="assets/demo/images/avatar/amyelsner.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/asiyajavayant.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/onyamalimba.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/ionibowcher.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="assets/demo/images/avatar/xuxuefeng.png" size="large"shape="circle"></p-avatar>
|
||||
<p-avatar label="+2" shape="circle" size="large" [style]="{'background-color':'#9c27b0', 'color': '#ffffff'}"></p-avatar>
|
||||
</p-avatarGroup>
|
||||
|
||||
<h5>Label - Circle</h5>
|
||||
<p-avatar label="P" styleClass="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" styleClass="mr-2" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" styleClass="mr-2" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
|
||||
<h5>Icon - Badge</h5>
|
||||
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>ScrollTop</h4>
|
||||
<p-scrollPanel [style]="{width: '250px', height: '200px'}">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
<p-scrollTop target="parent" styleClass="custom-scrolltop" [threshold]="100" icon="pi pi-arrow-up"></p-scrollTop>
|
||||
</p-scrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h4>Tag</h4>
|
||||
<h5>Tags</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag severity="danger" value="Danger"></p-tag>
|
||||
|
||||
<h5>Pills</h5>
|
||||
<p-tag styleClass="mr-2" value="Primary" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
|
||||
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-user" value="Primary"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
|
||||
<p-tag styleClass="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
|
||||
<p-tag styleClass="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
|
||||
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Mystery" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" styleClass="m-1 custom-chip"></p-chip>
|
||||
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-1 custom-chip"></p-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Skeleton</h4>
|
||||
<div class="border-round border-1 surface-border p-4">
|
||||
<div class="flex mb-3">
|
||||
<p-skeleton shape="circle" size="4rem" styleClass="mr-2"></p-skeleton>
|
||||
<div>
|
||||
<p-skeleton width="10rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton width="5rem" styleClass="mb-2"></p-skeleton>
|
||||
<p-skeleton height=".5rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<p-skeleton width="100%" height="150px"></p-skeleton>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
<p-skeleton width="4rem" height="2rem"></p-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
src/app/demo/components/uikit/misc/miscdemo.component.ts
Normal file
25
src/app/demo/components/uikit/misc/miscdemo.component.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './miscdemo.component.html'
|
||||
})
|
||||
export class MiscDemoComponent implements OnInit, OnDestroy {
|
||||
|
||||
value = 0;
|
||||
|
||||
interval: any;
|
||||
|
||||
ngOnInit() {
|
||||
this.interval = setInterval(() => {
|
||||
this.value = this.value + Math.floor(Math.random() * 10) + 1;
|
||||
if (this.value >= 100) {
|
||||
this.value = 100;
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
}
|
||||
33
src/app/demo/components/uikit/misc/miscdemo.module.ts
Normal file
33
src/app/demo/components/uikit/misc/miscdemo.module.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MiscDemoComponent } from './miscdemo.component';
|
||||
import { MiscDemoRoutingModule } from './miscdemo-routing.module';
|
||||
import { ProgressBarModule } from 'primeng/progressbar';
|
||||
import { BadgeModule } from 'primeng/badge';
|
||||
import { AvatarModule } from 'primeng/avatar';
|
||||
import { ScrollPanelModule } from 'primeng/scrollpanel';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { SkeletonModule } from 'primeng/skeleton';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { AvatarGroupModule } from 'primeng/avatargroup';
|
||||
import { ScrollTopModule } from 'primeng/scrolltop';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
MiscDemoRoutingModule,
|
||||
ProgressBarModule,
|
||||
BadgeModule,
|
||||
AvatarModule,
|
||||
ScrollPanelModule,
|
||||
TagModule,
|
||||
ChipModule,
|
||||
ButtonModule,
|
||||
SkeletonModule,
|
||||
AvatarGroupModule,
|
||||
ScrollTopModule
|
||||
],
|
||||
declarations: [MiscDemoComponent]
|
||||
})
|
||||
export class MiscDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { OverlaysDemoComponent } from './overlaysdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: OverlaysDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class OverlaysDemoRoutingModule { }
|
||||
@@ -0,0 +1,124 @@
|
||||
<div class="grid">
|
||||
<p-toast></p-toast>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Dialog</h5>
|
||||
<p-dialog header="Dialog" [(visible)]="display" [modal]="true" showEffect="fade" [style]="{width: '30vw'}" [breakpoints]="{'960px': '75vw'}">
|
||||
<p class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<ng-template pTemplate="footer">
|
||||
<button pButton icon="pi pi-check" (click)="display=false" label="Ok" class="p-button-outlined"></button>
|
||||
</ng-template>
|
||||
</p-dialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button (click)="display=true" pButton icon="pi pi-external-link" label="Show" style="width:auto;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="Image" (click)="op1.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op1 [showCloseIcon]="true" [style]="{width: '450px'}">
|
||||
<img src="assets/demo/images/nature/nature1.jpg" alt="Nature 1" style="width:100%"/>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button type="button" pButton label="DataTable" (click)="op2.toggle($event)" class="p-button-success"></button>
|
||||
<p-overlayPanel #op2 [showCloseIcon]="true" [style]="{width: '450px'}">
|
||||
<ng-template pTemplate>
|
||||
<p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" [paginator]="true" [rows]="5" (onRowSelect)="op2.hide()" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowData let-product>
|
||||
<tr [pSelectableRow]="rowData">
|
||||
<td style="min-width: 10rem;">{{product.name}}</td>
|
||||
<td style="min-width: 5rem;"><img src="assets/demo/images/product/{{product.image}}" [alt]="product.image" width="50" class="shadow-2"/></td>
|
||||
<td style="min-width: 12rem;">{{formatCurrency(product.price)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-template>
|
||||
</p-overlayPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card p-fluid">
|
||||
<h5>Confirmation</h5>
|
||||
<p-confirmDialog header="Confirmation" key="confirm1" icon="pi pi-exclamation-triangle" message="Are you sure you want to proceed?"
|
||||
[style]="{width: '350px'}" acceptButtonStyleClass="p-button-text" rejectButtonStyleClass="p-button-text"></p-confirmDialog>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<button type="text" (click)="confirm1()" pButton icon="pi pi-trash" label="Delete" class="p-button-danger" style="width:auto;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Sidebar</h5>
|
||||
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Left Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Right Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Top Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Bottom Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
|
||||
<h3 style="font-weight:normal">Full Screen Sidebar</h3>
|
||||
</p-sidebar>
|
||||
|
||||
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Username</label>
|
||||
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
|
||||
</div>
|
||||
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>ConfirmPopup</h5>
|
||||
|
||||
<p-toast></p-toast>
|
||||
<button (click)="confirm2($event)" pButton icon="pi pi-check" label="Confirm"></button>
|
||||
<p-confirmPopup key="confirm2"></p-confirmPopup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
import { Product } from 'src/app/demo/api/product';
|
||||
import { ProductService } from 'src/app/demo/service/product.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './overlaysdemo.component.html',
|
||||
providers: [ConfirmationService, MessageService]
|
||||
})
|
||||
export class OverlaysDemoComponent implements OnInit {
|
||||
|
||||
images: any[] = [];
|
||||
|
||||
display: boolean = false;
|
||||
|
||||
products: Product[] = [];
|
||||
|
||||
selectedProduct: Product = {};
|
||||
|
||||
visibleSidebar1: boolean = false;
|
||||
|
||||
visibleSidebar2: boolean = false;
|
||||
|
||||
visibleSidebar3: boolean = false;
|
||||
|
||||
visibleSidebar4: boolean = false;
|
||||
|
||||
visibleSidebar5: boolean = false;
|
||||
|
||||
constructor(private productService: ProductService, private confirmationService: ConfirmationService, private messageService: MessageService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.productService.getProductsSmall().then(products => this.products = products);
|
||||
|
||||
this.images = [];
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos1.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos1_small.jpg', title: 'Sopranos 1'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos2.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos2_small.jpg', title: 'Sopranos 2'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos3.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos3_small.jpg', title: 'Sopranos 3'
|
||||
});
|
||||
this.images.push({
|
||||
source: 'assets/demo/images/sopranos/sopranos4.jpg',
|
||||
thumbnail: 'assets/demo/images/sopranos/sopranos4_small.jpg', title: 'Sopranos 4'
|
||||
});
|
||||
}
|
||||
|
||||
confirm1() {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm1',
|
||||
message: 'Are you sure to perform this action?'
|
||||
});
|
||||
}
|
||||
|
||||
confirm2(event: Event) {
|
||||
this.confirmationService.confirm({
|
||||
key: 'confirm2',
|
||||
target: event.target || new EventTarget,
|
||||
message: 'Are you sure that you want to proceed?',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
accept: () => {
|
||||
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' });
|
||||
},
|
||||
reject: () => {
|
||||
this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatCurrency(value: number) {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { OverlaysDemoComponent } from './overlaysdemo.component';
|
||||
import { OverlaysDemoRoutingModule } from './overlaysdemo-routing.module';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { DialogModule } from 'primeng/dialog';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { OverlayPanelModule } from 'primeng/overlaypanel';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ConfirmDialogModule } from 'primeng/confirmdialog';
|
||||
import { SidebarModule } from 'primeng/sidebar';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { ConfirmPopupModule } from 'primeng/confirmpopup';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
OverlaysDemoRoutingModule,
|
||||
ToastModule,
|
||||
DialogModule,
|
||||
FormsModule,
|
||||
TooltipModule,
|
||||
InputTextModule,
|
||||
ButtonModule,
|
||||
OverlayPanelModule,
|
||||
TableModule,
|
||||
ConfirmDialogModule,
|
||||
SidebarModule,
|
||||
RippleModule,
|
||||
ConfirmPopupModule
|
||||
],
|
||||
declarations: [OverlaysDemoComponent]
|
||||
})
|
||||
export class OverlaysDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { PanelsDemoComponent } from './panelsdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: PanelsDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class PanelsDemoRoutingModule { }
|
||||
236
src/app/demo/components/uikit/panels/panelsdemo.component.html
Normal file
236
src/app/demo/components/uikit/panels/panelsdemo.component.html
Normal file
@@ -0,0 +1,236 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Toolbar</h5>
|
||||
<p-toolbar>
|
||||
<div class="p-toolbar-group-left flex flex-wrap">
|
||||
<button pButton type="button" label="New" icon="pi pi-plus" class="mr-2"></button>
|
||||
<button pButton type="button" label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2"></button>
|
||||
|
||||
<i class="pi pi-bars p-toolbar-separator"></i>
|
||||
|
||||
<button pButton type="button" icon="pi pi-check" class="p-button-success mr-2"></button>
|
||||
<button pButton type="button" icon="pi pi-trash" class="p-button-warning mr-2"></button>
|
||||
<button pButton type="button" icon="pi pi-print" class="p-button-danger"></button>
|
||||
</div>
|
||||
|
||||
<div class="p-toolbar-group-right">
|
||||
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
|
||||
</div>
|
||||
</p-toolbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>AccordionPanel</h5>
|
||||
<p-accordion>
|
||||
<p-accordionTab header="Header I" [selected]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header II" class="line-height-3 m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="Header III" class="line-height-3 m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-accordionTab>
|
||||
</p-accordion>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>TabView</h5>
|
||||
<p-tabView orientation="left">
|
||||
<p-tabPanel header="Header I" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
||||
pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
|
||||
est laborum.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header II" class="line-height-3 m-0">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque
|
||||
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||||
enim ipsam voluptatem quia
|
||||
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt.
|
||||
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||||
</p-tabPanel>
|
||||
<p-tabPanel header="Header III" class="line-height-3 m-0">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores
|
||||
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||||
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit
|
||||
quo minus.
|
||||
</p-tabPanel>
|
||||
</p-tabView>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>Panel</h5>
|
||||
<p-panel header="Header" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-panel>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Fieldset</h5>
|
||||
<p-fieldset legend="Legend" [toggleable]="true" class="line-height-3 m-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.
|
||||
</p-fieldset>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-0">
|
||||
<h5>Card</h5>
|
||||
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
|
||||
<button pButton type="button" icon="pi pi-plus" class="p-button-text"
|
||||
(click)="menu.toggle($event)"></button>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
||||
laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Divider</h5>
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<input pInputText id="username" type="text"/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input pInputText id="password" type="password"/>
|
||||
</div>
|
||||
<p-button label="Login" class="mt-2"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<p-divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</p-divider>
|
||||
</div>
|
||||
<div class="col-5 align-items-center justify-content-center">
|
||||
<p class="line-height-3 m-0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||||
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
|
||||
<p-divider layout="horizontal" align="center">
|
||||
<span class="p-tag">Badge</span>
|
||||
</p-divider>
|
||||
|
||||
<p class="line-height-3 m-0">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||||
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
|
||||
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
|
||||
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||||
|
||||
<p-divider align="right">
|
||||
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
|
||||
</p-divider>
|
||||
|
||||
<p class="line-height-3 m-0">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
||||
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
|
||||
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
|
||||
doloribus asperiores repellat.
|
||||
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
|
||||
Morbi dapibus luctus odio.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Splitter</h5>
|
||||
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[5,0]" styleClass="mb-5" [panelStyle]="{'overflow': 'scroll'}">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
|
||||
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
|
||||
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
|
||||
id est laborum.
|
||||
</p>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" [style]="{'overflow':'scroll'}">
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||||
doloremque
|
||||
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||||
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||||
voluptas
|
||||
sit
|
||||
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
|
||||
modi.
|
||||
</p>
|
||||
</ng-template>
|
||||
<ng-template pTemplate>
|
||||
<p class="col m-3">
|
||||
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
|
||||
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
|
||||
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||||
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
|
||||
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||||
eligendi optio cumque nihil impedit quo minus.
|
||||
</p>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</ng-template>
|
||||
</p-splitter>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
31
src/app/demo/components/uikit/panels/panelsdemo.component.ts
Normal file
31
src/app/demo/components/uikit/panels/panelsdemo.component.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './panelsdemo.component.html'
|
||||
})
|
||||
export class PanelsDemoComponent implements OnInit {
|
||||
|
||||
items: MenuItem[] = [];
|
||||
|
||||
cardMenu: MenuItem[] = [];
|
||||
|
||||
ngOnInit() {
|
||||
this.items = [
|
||||
{ label: 'Angular.io', icon: 'pi pi-external-link', url: 'http://angular.io' },
|
||||
{ label: 'Theming', icon: 'pi pi-bookmark', routerLink: ['/theming'] }
|
||||
];
|
||||
|
||||
this.cardMenu = [
|
||||
{
|
||||
label: 'Save', icon: 'pi pi-fw pi-check'
|
||||
},
|
||||
{
|
||||
label: 'Update', icon: 'pi pi-fw pi-refresh'
|
||||
},
|
||||
{
|
||||
label: 'Delete', icon: 'pi pi-fw pi-trash'
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
39
src/app/demo/components/uikit/panels/panelsdemo.module.ts
Normal file
39
src/app/demo/components/uikit/panels/panelsdemo.module.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { PanelsDemoComponent } from './panelsdemo.component';
|
||||
import { PanelsDemoRoutingModule } from './panelsdemo-routing.module';
|
||||
import { ToolbarModule } from 'primeng/toolbar';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { SplitButtonModule } from 'primeng/splitbutton';
|
||||
import { AccordionModule } from 'primeng/accordion';
|
||||
import { TabViewModule } from 'primeng/tabview';
|
||||
import { FieldsetModule } from 'primeng/fieldset';
|
||||
import { MenuModule } from 'primeng/menu';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { SplitterModule } from 'primeng/splitter';
|
||||
import { PanelModule } from 'primeng/panel';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
PanelsDemoRoutingModule,
|
||||
ToolbarModule,
|
||||
ButtonModule,
|
||||
RippleModule,
|
||||
SplitButtonModule,
|
||||
AccordionModule,
|
||||
TabViewModule,
|
||||
FieldsetModule,
|
||||
MenuModule,
|
||||
InputTextModule,
|
||||
DividerModule,
|
||||
SplitterModule,
|
||||
PanelModule
|
||||
],
|
||||
declarations: [PanelsDemoComponent]
|
||||
})
|
||||
export class PanelsDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TableDemoComponent } from './tabledemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: TableDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TableDemoRoutingModule { }
|
||||
303
src/app/demo/components/uikit/table/tabledemo.component.html
Normal file
303
src/app/demo/components/uikit/table/tabledemo.component.html
Normal file
@@ -0,0 +1,303 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Filter Menu</h5>
|
||||
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex justify-content-between flex-column sm:flex-row">
|
||||
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
|
||||
<span class="p-input-icon-left mb-2">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword" class="w-full"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Name
|
||||
<p-columnFilter type="text" field="name" display="menu" placeholder="Search by name"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Country
|
||||
<p-columnFilter type="text" field="country.name" display="menu" placeholder="Search by country"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Agent
|
||||
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="px-3 pt-3 pb-0">
|
||||
<span class="font-bold">Agent Picker</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
|
||||
<ng-template let-option pTemplate="item">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img [alt]="option.label" src="assets/demo/images/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="ml-2">{{option.name}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Date
|
||||
<p-columnFilter type="date" field="date" display="menu" placeholder="mm/dd/yyyy"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Balance
|
||||
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Status
|
||||
<p-columnFilter field="status" matchMode="equals" display="menu">
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [style]="{'min-width': '12rem'}" >
|
||||
<ng-template let-option pTemplate="item">
|
||||
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
|
||||
</ng-template>
|
||||
</p-dropdown>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Activity
|
||||
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="filter" let-filter="filterCallback">
|
||||
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3" [style]="{'min-width': '12rem'}" ></p-slider>
|
||||
<div class="flex align-items-center justify-content-between px-2">
|
||||
<span>{{activityValues[0]}}</span>
|
||||
<span>{{activityValues[1]}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem">
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Verified
|
||||
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="min-width: 12rem;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td style="min-width: 12rem;">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text ml-2">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 14rem;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
|
||||
<span class="image-text ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 10rem;">
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</td>
|
||||
<td style="min-width: 10rem;">
|
||||
{{customer.balance | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td style="min-width: 12rem;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="min-width: 12rem; ">
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td class="text-center" style="min-width: 8rem;">
|
||||
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="7">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="loadingbody">
|
||||
<tr>
|
||||
<td colspan="7">Loading customers data. Please wait.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Frozen Columns</h5>
|
||||
<p-toggleButton [(ngModel)]="idFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Unfreeze Id'" offLabel="Freeze Id" [style]="{'width': '12rem'}"></p-toggleButton>
|
||||
|
||||
<p-table [value]="customers3" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:200px" pFrozenColumn>Name</th>
|
||||
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
|
||||
<th style="width:200px">Country</th>
|
||||
<th style="width:200px">Date</th>
|
||||
<th style="width:200px">Company</th>
|
||||
<th style="width:200px">Status</th>
|
||||
<th style="width:200px">Activity</th>
|
||||
<th style="width:200px">Representative</th>
|
||||
<th style="width:200px" pFrozenColumn alignFrozen="right">Balance</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
|
||||
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
|
||||
<td style="width:200px">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text ml-2">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td style="width:200px">{{customer.date}}</td>
|
||||
<td style="width:200px">{{customer.company}}</td>
|
||||
<td style="width:200px">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="width:200px">{{customer.activity}}</td>
|
||||
<td style="width:200px">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
|
||||
<span class="image-text ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td style="width:200px" pFrozenColumn alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Expand</h5>
|
||||
<p-toast></p-toast>
|
||||
<p-table [value]="products" dataKey="name" [expandedRowKeys]="expandedRows" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<button pButton icon="pi pi-fw {{isExpanded ? 'pi-minus' : 'pi-plus'}}" label="{{isExpanded ? 'Collapse All' : 'Expand All'}}" (click)="expandAll()"></button>
|
||||
<div class="flex table-header">
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem"></th>
|
||||
<th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
|
||||
<th>Image</th>
|
||||
<th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="category">Category <p-sortIcon field="category"></p-sortIcon></th>
|
||||
<th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
|
||||
<th pSortableColumn="inventoryStatus">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-product let-expanded="expanded">
|
||||
<tr>
|
||||
<td>
|
||||
<button type="button" pButton pRipple [pRowToggler]="product" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
</td>
|
||||
<td style="min-width: 12rem;">{{product.name}}</td>
|
||||
<td><img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
|
||||
<td style="min-width: 8rem;">{{product.price | currency:'USD'}}</td>
|
||||
<td style="min-width: 10rem;">{{product.category}}</td>
|
||||
<td style="min-width: 10rem;"><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
|
||||
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-product>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div class="p-3">
|
||||
<p-table [value]="product.orders" dataKey="id" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="id">Id <p-sortIcon field="price"></p-sortIcon></th>
|
||||
<th pSortableColumn="customer">Customer <p-sortIcon field="customer"></p-sortIcon></th>
|
||||
<th pSortableColumn="date">Date <p-sortIcon field="date"></p-sortIcon></th>
|
||||
<th pSortableColumn="amount">Amount <p-sortIcon field="amount"></p-sortIcon></th>
|
||||
<th pSortableColumn="stats">Status <p-sortIcon field="status"></p-sortIcon></th>
|
||||
<th style="width: 4rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-order>
|
||||
<tr>
|
||||
<td>{{order.id}}</td>
|
||||
<td>{{order.customer}}</td>
|
||||
<td>{{order.date}}</td>
|
||||
<td>{{order.amount | currency:'USD'}}</td>
|
||||
<td><span [class]="'order-badge order-' + order.status.toLowerCase()">{{order.status}}</span></td>
|
||||
<td><p-button type="button" icon="pi pi-search"></p-button></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="6">There are no order for this product yet.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Subheader Grouping</h5>
|
||||
<p-table [value]="customers3" rowGroupMode="subheader" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="400px">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Country</th>
|
||||
<th>Company</th>
|
||||
<th>Status</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr pRowGroupHeader *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5" style="min-width: 200px;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="font-bold ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
150
src/app/demo/components/uikit/table/tabledemo.component.ts
Normal file
150
src/app/demo/components/uikit/table/tabledemo.component.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
||||
import { Table } from 'primeng/table';
|
||||
import { MessageService, ConfirmationService } from 'primeng/api';
|
||||
import { Customer, Representative } from 'src/app/demo/api/customer';
|
||||
import { Product } from 'src/app/demo/api/product';
|
||||
import { CustomerService } from 'src/app/demo/service/customer.service';
|
||||
import { ProductService } from 'src/app/demo/service/product.service';
|
||||
|
||||
interface expandedRows {
|
||||
[key: string]: boolean;
|
||||
}
|
||||
|
||||
@Component({
|
||||
templateUrl: './tabledemo.component.html',
|
||||
providers: [MessageService, ConfirmationService],
|
||||
styles: [`
|
||||
:host ::ng-deep .p-frozen-column {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-datatable-frozen-tbody {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-progressbar {
|
||||
height:.5rem;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class TableDemoComponent implements OnInit {
|
||||
|
||||
customers1: Customer[] = [];
|
||||
|
||||
customers2: Customer[] = [];
|
||||
|
||||
customers3: Customer[] = [];
|
||||
|
||||
selectedCustomers1: Customer[] = [];
|
||||
|
||||
selectedCustomer: Customer = {};
|
||||
|
||||
representatives: Representative[] = [];
|
||||
|
||||
statuses: any[] = [];
|
||||
|
||||
products: Product[] = [];
|
||||
|
||||
rowGroupMetadata: any;
|
||||
|
||||
expandedRows: expandedRows = {};
|
||||
|
||||
activityValues: number[] = [0, 100];
|
||||
|
||||
isExpanded: boolean = false;
|
||||
|
||||
idFrozen: boolean = false;
|
||||
|
||||
loading: boolean = true;
|
||||
|
||||
@ViewChild('filter') filter!: ElementRef;
|
||||
|
||||
constructor(private customerService: CustomerService, private productService: ProductService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.customerService.getCustomersLarge().then(customers => {
|
||||
this.customers1 = customers;
|
||||
this.loading = false;
|
||||
|
||||
// @ts-ignore
|
||||
this.customers1.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
|
||||
this.customerService.getCustomersLarge().then(customers => this.customers3 = customers);
|
||||
this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
|
||||
|
||||
this.representatives = [
|
||||
{ name: 'Amy Elsner', image: 'amyelsner.png' },
|
||||
{ name: 'Anna Fali', image: 'annafali.png' },
|
||||
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
|
||||
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
|
||||
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
|
||||
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
|
||||
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
|
||||
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
|
||||
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
|
||||
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
|
||||
];
|
||||
|
||||
this.statuses = [
|
||||
{ label: 'Unqualified', value: 'unqualified' },
|
||||
{ label: 'Qualified', value: 'qualified' },
|
||||
{ label: 'New', value: 'new' },
|
||||
{ label: 'Negotiation', value: 'negotiation' },
|
||||
{ label: 'Renewal', value: 'renewal' },
|
||||
{ label: 'Proposal', value: 'proposal' }
|
||||
];
|
||||
}
|
||||
|
||||
onSort() {
|
||||
this.updateRowGroupMetaData();
|
||||
}
|
||||
|
||||
updateRowGroupMetaData() {
|
||||
this.rowGroupMetadata = {};
|
||||
|
||||
if (this.customers3) {
|
||||
for (let i = 0; i < this.customers3.length; i++) {
|
||||
const rowData = this.customers3[i];
|
||||
const representativeName = rowData?.representative?.name || '';
|
||||
|
||||
if (i === 0) {
|
||||
this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
|
||||
}
|
||||
else {
|
||||
const previousRowData = this.customers3[i - 1];
|
||||
const previousRowGroup = previousRowData?.representative?.name;
|
||||
if (representativeName === previousRowGroup) {
|
||||
this.rowGroupMetadata[representativeName].size++;
|
||||
}
|
||||
else {
|
||||
this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
expandAll() {
|
||||
if (!this.isExpanded) {
|
||||
this.products.forEach(product => product && product.name ? this.expandedRows[product.name] = true : '');
|
||||
|
||||
} else {
|
||||
this.expandedRows = {};
|
||||
}
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
formatCurrency(value: number) {
|
||||
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
|
||||
}
|
||||
|
||||
onGlobalFilter(table: Table, event: Event) {
|
||||
table.filterGlobal((event.target as HTMLInputElement).value, 'contains');
|
||||
}
|
||||
|
||||
clear(table: Table) {
|
||||
table.clear();
|
||||
this.filter.nativeElement.value = '';
|
||||
}
|
||||
}
|
||||
37
src/app/demo/components/uikit/table/tabledemo.module.ts
Normal file
37
src/app/demo/components/uikit/table/tabledemo.module.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TableDemoComponent } from './tabledemo.component';
|
||||
import { TableDemoRoutingModule } from './tabledemo-routing.module';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { RippleModule } from 'primeng/ripple';
|
||||
import { MultiSelectModule } from 'primeng/multiselect';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { ProgressBarModule } from 'primeng/progressbar';
|
||||
import { ToastModule } from 'primeng/toast';
|
||||
import { SliderModule } from 'primeng/slider';
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TableDemoRoutingModule,
|
||||
FormsModule,
|
||||
TableModule,
|
||||
RatingModule,
|
||||
ButtonModule,
|
||||
SliderModule,
|
||||
InputTextModule,
|
||||
ToggleButtonModule,
|
||||
RippleModule,
|
||||
MultiSelectModule,
|
||||
DropdownModule,
|
||||
ProgressBarModule,
|
||||
ToastModule
|
||||
],
|
||||
declarations: [TableDemoComponent]
|
||||
})
|
||||
export class TableDemoModule { }
|
||||
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TreeDemoComponent } from './treedemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: TreeDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class TreeDemoRoutingModule { }
|
||||
37
src/app/demo/components/uikit/tree/treedemo.component.html
Normal file
37
src/app/demo/components/uikit/tree/treedemo.component.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Tree</h5>
|
||||
<p-tree [value]="files1" selectionMode="checkbox" [(selection)]="selectedFiles1"></p-tree>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>TreeTable</h5>
|
||||
<p-treeTable [value]="files2" [columns]="cols" selectionMode="checkbox" [(selection)]="selectedFiles2">
|
||||
<ng-template pTemplate="header" let-columns>
|
||||
<tr>
|
||||
<th *ngFor="let col of columns">
|
||||
{{col.header}}
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
|
||||
<tr>
|
||||
<td *ngFor="let col of columns; let i = index">
|
||||
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
|
||||
<p-treeTableCheckbox [value]="rowNode" *ngIf="i == 0"></p-treeTableCheckbox>
|
||||
{{rowData[col.field]}}
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-treeTable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Horizontal Tree</h5>
|
||||
<p-tree [value]="files3" layout="horizontal" selectionMode="single" [(selection)]="selectedFiles3"></p-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
42
src/app/demo/components/uikit/tree/treedemo.component.ts
Normal file
42
src/app/demo/components/uikit/tree/treedemo.component.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TreeNode } from 'primeng/api';
|
||||
import { NodeService } from 'src/app/demo/service/node.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './treedemo.component.html'
|
||||
})
|
||||
export class TreeDemoComponent implements OnInit {
|
||||
|
||||
files1: TreeNode[] = [];
|
||||
|
||||
files2: TreeNode[] = [];
|
||||
|
||||
files3: TreeNode[] = [];
|
||||
|
||||
selectedFiles1: TreeNode[] = [];
|
||||
|
||||
selectedFiles2: TreeNode[] = [];
|
||||
|
||||
selectedFiles3: TreeNode = {};
|
||||
|
||||
cols: any[] = [];
|
||||
|
||||
constructor(private nodeService: NodeService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.nodeService.getFiles().then(files => this.files1 = files);
|
||||
this.nodeService.getFilesystem().then(files => this.files2 = files);
|
||||
this.nodeService.getFiles().then(files => {
|
||||
this.files3 = [{
|
||||
label: 'Root',
|
||||
children: files
|
||||
}];
|
||||
});
|
||||
|
||||
this.cols = [
|
||||
{ field: 'name', header: 'Name' },
|
||||
{ field: 'size', header: 'Size' },
|
||||
{ field: 'type', header: 'Type' }
|
||||
];
|
||||
}
|
||||
}
|
||||
19
src/app/demo/components/uikit/tree/treedemo.module.ts
Normal file
19
src/app/demo/components/uikit/tree/treedemo.module.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { TreeDemoComponent } from './treedemo.component';
|
||||
import { TreeDemoRoutingModule } from './treedemo-routing.module';
|
||||
import { TreeModule } from 'primeng/tree';
|
||||
import { TreeTableModule } from 'primeng/treetable';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
TreeDemoRoutingModule,
|
||||
FormsModule,
|
||||
TreeModule,
|
||||
TreeTableModule
|
||||
],
|
||||
declarations: [TreeDemoComponent],
|
||||
})
|
||||
export class TreeDemoModule { }
|
||||
25
src/app/demo/components/uikit/uikit-routing.module.ts
Normal file
25
src/app/demo/components/uikit/uikit-routing.module.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: 'formlayout', loadChildren: () => import('./formlayout/formlayout.module').then(m => m.FormlayoutModule) },
|
||||
{ path: 'button', loadChildren: () => import('./button/buttondemo.module').then(m => m.ButtonDemoModule) },
|
||||
{ path: 'charts', loadChildren: () => import('./charts/charts.module').then(m => m.ChartsModule) },
|
||||
{ path: 'file', loadChildren: () => import('./file/filedemo.module').then(m => m.FileDemoModule) },
|
||||
{ path: 'floatlabel', loadChildren: () => import('./floatlabel/floatlabeldemo.module').then(m => m.FloatlabelDemoModule) },
|
||||
{ path: 'input', loadChildren: () => import('./input/inputdemo.module').then(m => m.InputDemoModule) },
|
||||
{ path: 'invalidstate', loadChildren: () => import('./invalid/invalidstatedemo.module').then(m => m.InvalidStateDemoModule) },
|
||||
{ path: 'list', loadChildren: () => import('./list/listdemo.module').then(m => m.ListDemoModule) },
|
||||
{ path: 'media', loadChildren: () => import('./media/mediademo.module').then(m => m.MediaDemoModule) },
|
||||
{ path: 'message', loadChildren: () => import('./messages/messagesdemo.module').then(m => m.MessagesDemoModule) },
|
||||
{ path: 'misc', loadChildren: () => import('./misc/miscdemo.module').then(m => m.MiscDemoModule) },
|
||||
{ path: 'overlay', loadChildren: () => import('./overlays/overlaysdemo.module').then(m => m.OverlaysDemoModule) },
|
||||
{ path: 'panel', loadChildren: () => import('./panels/panelsdemo.module').then(m => m.PanelsDemoModule) },
|
||||
{ path: 'table', loadChildren: () => import('./table/tabledemo.module').then(m => m.TableDemoModule) },
|
||||
{ path: 'tree', loadChildren: () => import('./tree/treedemo.module').then(m => m.TreeDemoModule) },
|
||||
{ path: 'menu', loadChildren: () => import('./menus/menus.module').then(m => m.MenusModule) }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class UikitRoutingModule { }
|
||||
12
src/app/demo/components/uikit/uikit.module.ts
Normal file
12
src/app/demo/components/uikit/uikit.module.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { UikitRoutingModule } from './uikit-routing.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
UikitRoutingModule
|
||||
],
|
||||
declarations: []
|
||||
})
|
||||
export class UikitModule { }
|
||||
Reference in New Issue
Block a user