Refactored Demo CSS visuals
This commit is contained in:
Cagatay Civici
parent
530703b69c
commit
28d7e9aee2
@ -1,24 +1,22 @@
|
||||
<div class="surface-0 flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="grid justify-content-center p-2 lg:p-0" style="min-width:80%">
|
||||
<div class="col-12 mt-5 xl:mt-0 text-center">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5" style="width:81px; height:60px;">
|
||||
</div>
|
||||
<div class="col-12 xl:col-6" style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="h-full w-full m-0 py-7 px-4" style="border-radius:53px; background: linear-gradient(180deg, var(--surface-50) 38.9%, var(--surface-0));">
|
||||
<div class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
|
||||
<div class="flex flex-column align-items-center justify-content-center">
|
||||
<img src="assets/layout/images/{{layoutService.config.colorScheme === 'light' ? 'logo-dark' : 'logo-white'}}.svg" alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0">
|
||||
<div style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%);">
|
||||
<div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius:53px">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/demo/images/login/avatar.png" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome, Isabel!</div>
|
||||
<span class="text-600 font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-10 mx-auto">
|
||||
<div>
|
||||
<label for="email1" class="block text-900 text-xl font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full mb-3" style="padding:1rem;">
|
||||
<input id="email1" type="text" placeholder="Email address" pInputText class="w-full md:w-30rem mb-5" style="padding:1rem">
|
||||
|
||||
<label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="w-full mb-3"></p-password>
|
||||
<p-password id="password1" [(ngModel)]="password" placeholder="Password" [toggleMask]="true" styleClass="mb-5" inputStyleClass="w-full p-3 md:w-30rem"></p-password>
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-5">
|
||||
<div class="flex align-items-center justify-content-between mb-5 gap-5">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
|
||||
@ -5,18 +5,8 @@ import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
selector: 'app-login',
|
||||
templateUrl: './login.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-password input {
|
||||
width: 100%;
|
||||
padding:1rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye{
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .pi-eye-slash{
|
||||
:host ::ng-deep .pi-eye,
|
||||
:host ::ng-deep .pi-eye-slash {
|
||||
transform:scale(1.6);
|
||||
margin-right: 1rem;
|
||||
color: var(--primary-color) !important;
|
||||
|
||||
@ -7,25 +7,25 @@
|
||||
<a pRipple class="cursor-pointer block lg:hidden text-700" pStyleClass="@next" enterClass="hidden" leaveToClass="hidden" [hideOnOutsideClick]="true">
|
||||
<i class="pi pi-bars text-4xl"></i>
|
||||
</a>
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:85%">
|
||||
<div class="align-items-center surface-0 flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 px-6 lg:px-0 z-2" style="top:120px">
|
||||
<ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<a (click)="router.navigate(['/landing'], {fragment: 'home'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<a (click)="router.navigate(['/landing'], {fragment: 'features'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Features</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<a (click)="router.navigate(['/landing'], {fragment: 'highlights'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Highlights</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a (click)="router.navigate(['/pages/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<a (click)="router.navigate(['/landing'], {fragment: 'pricing'})" pRipple class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3">
|
||||
<span>Pricing</span>
|
||||
</a>
|
||||
</li>
|
||||
@ -37,13 +37,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hero" class="grid py-4 px-4 lg:px-8 relative">
|
||||
<div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
|
||||
style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%); clip-path: ellipse(150% 87% at 93% 13%);">
|
||||
<div class="mx-4 md:mx-8 mt-0 md:mt-4">
|
||||
<h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem integer</span>eget magna fermentum</h1>
|
||||
<p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed cras. Fames ac turpis egestas integer. Placerat in egestas erat... </p>
|
||||
<button pButton pRipple type="button" label="Get Started" class="p-button-rounded text-xl border-none mt-3 bg-blue-500 font-normal line-height-3 px-3 text-white"></button>
|
||||
</div>
|
||||
<img src="assets/demo/images/landing/screen-1.png" alt="" class="sm:mt-5 md:mt-0" style="right:10%;">
|
||||
<div class="flex justify-content-center md:justify-content-end">
|
||||
<img src="assets/demo/images/landing/screen-1.png" alt="Hero Image" class="w-9 md:w-auto">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
|
||||
@ -216,7 +219,7 @@
|
||||
|
||||
<div class="grid justify-content-between mt-8 md:mt-0">
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Free</h3>
|
||||
<img src="assets/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free">
|
||||
<div class="my-5 text-center">
|
||||
@ -247,7 +250,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Startup</h3>
|
||||
<img src="assets/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup">
|
||||
<div class="my-5 text-center">
|
||||
@ -278,7 +281,7 @@
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer" style="border:2px solid; border-radius:10px;">
|
||||
<div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all" style="border-radius:10px">
|
||||
<h3 class="text-900 text-center my-5">Enterprise</h3>
|
||||
<img src="assets/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise">
|
||||
<div class="my-5 text-center">
|
||||
|
||||
@ -4,60 +4,10 @@ import { LayoutService } from 'src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-landing',
|
||||
templateUrl: './landing.component.html',
|
||||
styles: [`
|
||||
#hero{
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%);
|
||||
height:700px;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.pricing-card:hover{
|
||||
border:2px solid var(--cyan-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#hero{
|
||||
-webkit-clip-path: ellipse(150% 87% at 93% 13%);
|
||||
clip-path: ellipse(150% 87% at 93% 13%);
|
||||
height: 530px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px){
|
||||
#hero > img {
|
||||
position: absolute;
|
||||
transform:scale(1.2);
|
||||
top:15%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px){
|
||||
#hero {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
#hero > img {
|
||||
position:static;
|
||||
transform: scale(1);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#hero > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#hero > div > p {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
`]
|
||||
templateUrl: './landing.component.html'
|
||||
})
|
||||
export class LandingComponent {
|
||||
|
||||
constructor(public layoutService: LayoutService, public router: Router) { }
|
||||
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -22,6 +22,6 @@
|
||||
&.p-toast-top-right,
|
||||
&.p-toast-top-left,
|
||||
&.p-toast-top-center {
|
||||
top: 75px;
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user