Refactored Demo CSS visuals
This commit is contained in:
Cagatay Civici
@@ -2,43 +2,51 @@
|
||||
<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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple label="Submit"></button>
|
||||
<button pButton pRipple label="Disabled" disabled="true"></button>
|
||||
<p-button label="Link" styleClass="p-button-link"></p-button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" label="Primary"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-secondary p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-success p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-info p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-warning p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-help p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-danger p-button-text"></button>
|
||||
<button pButton pRipple type="button" label="Plain" class="p-button-text p-button-plain"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-outlined p-button-secondary"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-outlined p-button-success"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-outlined p-button-info"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-outlined p-button-warning"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-outlined p-button-help"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-outlined p-button-danger"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
@@ -46,100 +54,117 @@
|
||||
<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 class="flex flex-wrap gap-2">
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-info"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-success"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-warning"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help"></p-splitButton>
|
||||
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger"></p-splitButton>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<p-button>
|
||||
<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">
|
||||
<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>
|
||||
<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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple icon="pi pi-star-fill"></button>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-bookmark"></button>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-bookmark" iconPos="right"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-raised"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-raised p-button-secondary"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-raised p-button-success"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-raised p-button-info"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-raised p-button-warning"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-raised p-button-help"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-raised p-button-danger"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" label="Primary" class="p-button-rounded"></button>
|
||||
<button pButton pRipple type="button" label="Secondary" class="p-button-rounded p-button-secondary"></button>
|
||||
<button pButton pRipple type="button" label="Success" class="p-button-rounded p-button-success"></button>
|
||||
<button pButton pRipple type="button" label="Info" class="p-button-rounded p-button-info"></button>
|
||||
<button pButton pRipple type="button" label="Warning" class="p-button-rounded p-button-warning"></button>
|
||||
<button pButton pRipple type="button" label="Help" class="p-button-rounded p-button-help"></button>
|
||||
<button pButton pRipple type="button" label="Danger" class="p-button-rounded p-button-danger"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<button pButton pRipple type="button" icon="pi pi-check" class="p-button-rounded p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined"></button>
|
||||
<button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined"></button>
|
||||
</div>
|
||||
</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 class="flex flex-wrap gap-2">
|
||||
<p-button label="Search" icon="pi pi-search" [loading]="loading[0]" (onClick)="load(0)"></p-button>
|
||||
<p-button label="Search" icon="pi pi-search" iconPos="right" [loading]="loading[1]" (onClick)="load(1)"></p-button>
|
||||
<p-button icon="pi pi-search" [loading]="loading[2]" (onClick)="load(2)"></p-button>
|
||||
<p-button label="Search" [loading]="loading[3]" (onClick)="load(3)"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,14 +50,14 @@ export class ChartsComponent implements OnInit, OnDestroy {
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--primary-700'),
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--green-600'),
|
||||
borderColor: documentStyle.getPropertyValue('--green-600'),
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-500'),
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
@@ -133,16 +133,16 @@ export class ChartsComponent implements OnInit, OnDestroy {
|
||||
label: 'First Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
fill: false,
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-700'),
|
||||
borderColor: documentStyle.getPropertyValue('--primary-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'),
|
||||
backgroundColor: documentStyle.getPropertyValue('--bluegray-600'),
|
||||
borderColor: documentStyle.getPropertyValue('--bluegray-600'),
|
||||
tension: .4
|
||||
}
|
||||
]
|
||||
|
||||
@@ -145,20 +145,11 @@
|
||||
|
||||
|
||||
<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>
|
||||
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" placeholder="Select a Country" optionLabel="name" class="multiselect-custom" display="chip">
|
||||
<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 class="flex align-items-center">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" style="width:21px"/>
|
||||
<span class="ml-2">{{country.name}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
@@ -179,7 +170,7 @@
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>InputGroup</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
|
||||
|
||||
@@ -4,53 +4,7 @@ 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
|
||||
}
|
||||
`]
|
||||
templateUrl: './inputdemo.component.html'
|
||||
})
|
||||
export class InputDemoComponent implements OnInit {
|
||||
countries: any[] = [];
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<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>
|
||||
<div class="mb-2">{{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>
|
||||
@@ -39,14 +39,14 @@
|
||||
<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 justify-content-between mb-2">
|
||||
<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">
|
||||
<div class="text-center mb-3">
|
||||
<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>
|
||||
|
||||
@@ -3,7 +3,11 @@ import { MegaMenuItem, MenuItem } from 'primeng/api';
|
||||
|
||||
@Component({
|
||||
templateUrl: './menus.component.html',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
styles: [`
|
||||
:host ::ng-deep .p-menubar-root-list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MenusComponent implements OnInit {
|
||||
|
||||
|
||||
@@ -2,21 +2,25 @@
|
||||
<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>
|
||||
<p-toast key="tst"></p-toast>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button type="button" pButton (click)="showSuccessViaToast()" label="Success" class="p-button-success"></button>
|
||||
<button type="button" pButton (click)="showInfoViaToast()" label="Info" class="p-button-info"></button>
|
||||
<button type="button" pButton (click)="showWarnViaToast()" label="Warn" class="p-button-warning"></button>
|
||||
<button type="button" pButton (click)="showErrorViaToast()" label="Error" class="p-button-danger"></button>
|
||||
</div>
|
||||
</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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button type="button" pButton (click)="showSuccessViaMessages()" label="Success" class="p-button-success"></button>
|
||||
<button type="button" pButton (click)="showInfoViaMessages()" label="Info" class="p-button-info"></button>
|
||||
<button type="button" pButton (click)="showWarnViaMessages()" label="Warn" class="p-button-warning"></button>
|
||||
<button type="button" pButton (click)="showErrorViaMessages()" label="Error" class="p-button-danger"></button>
|
||||
</div>
|
||||
|
||||
<p-messages [value]="msgs"></p-messages>
|
||||
</div>
|
||||
@@ -25,20 +29,16 @@
|
||||
<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 class="flex align-items-center flex-wrap gap-2 mb-3">
|
||||
<label for="username" class="w-9rem">Username</label>
|
||||
<input id="username" type="text" #username pInputText placeholder="Username" class="ng-dirty ng-invalid">
|
||||
<p-message severity="error" text="Field is required"></p-message>
|
||||
</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 class="flex align-items-center flex-wrap gap-2">
|
||||
<label for="email" class="w-9rem">Email</label>
|
||||
<input type="text" #email pInputText placeholder="Email" label="email" class="ng-dirty ng-invalid">
|
||||
<p-message severity="error"></p-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,15 +3,6 @@ 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 {
|
||||
|
||||
@@ -16,29 +16,34 @@
|
||||
<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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-badge value="2"></p-badge>
|
||||
<p-badge value="8" severity="success"></p-badge>
|
||||
<p-badge value="4" severity="info"></p-badge>
|
||||
<p-badge value="12" severity="warning"></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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-button label="Emails" badge="8"></p-button>
|
||||
<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
</div>
|
||||
|
||||
|
||||
<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 class="flex flex-wrap gap-2 align-items-end">
|
||||
<p-badge value="2"></p-badge>
|
||||
<p-badge value="4" size="large" severity="warning"></p-badge>
|
||||
<p-badge value="6" size="xlarge" severity="success"></p-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,12 +60,14 @@
|
||||
</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>
|
||||
<div class="flex flex-wrap gap-2 align-items-end">
|
||||
<p-avatar label="P" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" size="large" [style]="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" [style]="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></p-avatar>
|
||||
</div>
|
||||
|
||||
<h5>Icon - Badge</h5>
|
||||
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" styleClass="mr-2" size="xlarge"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" pBadge value="4" severity="success" size="xlarge"></p-avatar>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
@@ -87,31 +94,37 @@
|
||||
<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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-tag value="Primary"></p-tag>
|
||||
<p-tag severity="success" value="Success"></p-tag>
|
||||
<p-tag severity="info" value="Info"></p-tag>
|
||||
<p-tag severity="warning" value="Warning"></p-tag>
|
||||
<p-tag severity="danger" value="Danger"></p-tag>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<p-tag value="Primary" [rounded]="true"></p-tag>
|
||||
<p-tag severity="success" value="Success" [rounded]="true"></p-tag>
|
||||
<p-tag severity="info" value="Info" [rounded]="true"></p-tag>
|
||||
<p-tag severity="warning" value="Warning" [rounded]="true"></p-tag>
|
||||
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>
|
||||
</div>
|
||||
|
||||
<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 class="flex flex-wrap gap-2">
|
||||
<p-tag icon="pi pi-user" value="Primary"></p-tag>
|
||||
<p-tag icon="pi pi-check" severity="success" value="Success"></p-tag>
|
||||
<p-tag icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
|
||||
<p-tag 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>
|
||||
|
||||
<div class="card">
|
||||
<h4>Chip</h4>
|
||||
<h5>Basic</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<div class="flex flex-wrap align-items-center">
|
||||
<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>
|
||||
@@ -119,7 +132,7 @@
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<div class="flex flex-wrap align-items-center">
|
||||
<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>
|
||||
@@ -127,7 +140,7 @@
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<div class="flex flex-wrap align-items-center">
|
||||
<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>
|
||||
@@ -135,7 +148,7 @@
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<div class="flex flex-wrap align-items-center">
|
||||
<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>
|
||||
|
||||
@@ -23,14 +23,14 @@
|
||||
|
||||
<div class="card p-fluid">
|
||||
<h5>Overlay Panel</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-6">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div>
|
||||
<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">
|
||||
<div>
|
||||
<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>
|
||||
@@ -91,22 +91,24 @@
|
||||
<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 class="flex flex-wrap gap-2">
|
||||
<button pButton type="button" (click)="visibleSidebar1 = true" icon="pi pi-arrow-right" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar2 = true" icon="pi pi-arrow-left" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar3 = true" icon="pi pi-arrow-down" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar4 = true" icon="pi pi-arrow-up" class="p-button-warning"></button>
|
||||
<button pButton type="button" (click)="visibleSidebar5 = true" icon="pi pi-external-link" class="p-button-warning"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Tooltip</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<span>
|
||||
<label for="firstname5" class="p-sr-only">Username</label>
|
||||
<input id="firstname5" type="text" pInputText placeholder="Username" pTooltip="Enter your username">
|
||||
</div>
|
||||
</span>
|
||||
<button pButton pRipple type="button" label="Save" icon="pi pi-check" pTooltip="Click to proceed"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -119,10 +119,10 @@
|
||||
<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>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false" [style]="{'height': '0.5rem'}"></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>
|
||||
<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>
|
||||
@@ -162,8 +162,8 @@
|
||||
</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" pFrozenColumn class="font-bold">{{customer.name}}</td>
|
||||
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen" [ngClass]="{'font-bold': 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>
|
||||
@@ -178,7 +178,7 @@
|
||||
<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>
|
||||
<td style="width:200px" pFrozenColumn class="font-bold" alignFrozen="right">{{formatCurrency(customer.balance)}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
@@ -12,20 +12,7 @@ interface expandedRows {
|
||||
|
||||
@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;
|
||||
}
|
||||
`]
|
||||
providers: [MessageService, ConfirmationService]
|
||||
})
|
||||
export class TableDemoComponent implements OnInit {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user