Update tabledemo and add primeblocks & icons pages
This commit is contained in:
Çetin
parent
2b18107f22
commit
bc08999a0a
@ -18,9 +18,11 @@ import {TableDemoComponent} from './demo/view/tabledemo.component';
|
||||
import {ListDemoComponent} from './demo/view/listdemo.component';
|
||||
import {TreeDemoComponent} from './demo/view/treedemo.component';
|
||||
import {AppCrudComponent} from './pages/app.crud.component';
|
||||
import {AppBlocksDemoComponent} from './demo/view/app.blocksdemo.component';
|
||||
import {FloatLabelDemoComponent} from './demo/view/floatlabeldemo.component';
|
||||
import { InvalidStateDemoComponent } from './demo/view/invalidstatedemo.component';
|
||||
import { AppTimelineDemoComponent } from './pages/app.timelinedemo.component';
|
||||
import {InvalidStateDemoComponent} from './demo/view/invalidstatedemo.component';
|
||||
import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
|
||||
import {IconsDemoComponent} from './demo/view/iconsdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -47,6 +49,8 @@ import { AppTimelineDemoComponent } from './pages/app.timelinedemo.component';
|
||||
{path: 'pages/crud', component: AppCrudComponent},
|
||||
{path: 'pages/timeline', component: AppTimelineDemoComponent},
|
||||
{path: 'pages/empty', component: EmptyDemoComponent},
|
||||
{path: 'icons', component: IconsDemoComponent},
|
||||
{path: 'blocks', component: AppBlocksDemoComponent},
|
||||
{path: 'documentation', component: DocumentationComponent}
|
||||
]
|
||||
},
|
||||
|
||||
148
src/app/app.blockviewer.component.scss
Normal file
148
src/app/app.blockviewer.component.scss
Normal file
@ -0,0 +1,148 @@
|
||||
.block-section {
|
||||
margin-bottom: 4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block-header {
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--surface-section);
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
border:1px solid var(--surface-d);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.block-title {
|
||||
font-weight: 700;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.badge-free {
|
||||
border-radius: 4px;
|
||||
padding: .25rem .5rem;
|
||||
background-color: var(--orange-500);
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.block-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
margin-left: 1rem;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .75rem;
|
||||
padding: .5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:not(.block-action-disabled):hover {
|
||||
background-color: var(--surface-c);
|
||||
}
|
||||
|
||||
&.block-action-active {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&.block-action-copy {
|
||||
i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.block-action-disabled {
|
||||
opacity: .6;
|
||||
cursor: auto !important;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block-content {
|
||||
padding: 0;
|
||||
border:1px solid var(--surface-d);
|
||||
border-top: 0 none;
|
||||
border-bottom-left-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
margin: 0 !important;
|
||||
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 0 none !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
padding: 0 2rem !important;
|
||||
|
||||
.token {
|
||||
&.tag,
|
||||
&.keyword {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-name,
|
||||
&.attr-string {
|
||||
color: #2196F3 !important;
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: #4CAF50 !important;
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.operator,
|
||||
&.string {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.block-header {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.block-actions {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
::ng-deep pre{
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
78
src/app/app.blockviewer.component.ts
Normal file
78
src/app/app.blockviewer.component.ts
Normal file
@ -0,0 +1,78 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { environment } from '../environments/environment';
|
||||
enum BlockView {
|
||||
PREVIEW,
|
||||
CODE
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'block-viewer',
|
||||
template: `
|
||||
<div class="block-section">
|
||||
<div class="block-header">
|
||||
<span class="block-title">
|
||||
<span>{{header}}</span>
|
||||
<span class="badge-free" *ngIf="free">Free</span>
|
||||
<span class="badge-new" *ngIf="new">New</span>
|
||||
</span>
|
||||
<div class="block-actions">
|
||||
<a tabindex="0" [ngClass]="{'block-action-active': blockView == BlockView.PREVIEW}" (click)="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
|
||||
<a [attr.tabindex]="codeDisabled ? null: '0'" [ngClass]="{'block-action-active': blockView == BlockView.CODE, 'block-action-disabled': codeDisabled}" (click)="activateView($event, BlockView.CODE)">
|
||||
<i class="pi pi-lock" *ngIf="codeDisabled"></i>
|
||||
<span>Code</span>
|
||||
</a>
|
||||
<a [attr.tabindex]="codeDisabled ? null: '0'" class="block-action-copy" [ngClass]="{'block-action-disabled': codeDisabled}" (click)="copyCode($event)"
|
||||
pTooltip="Copied to clipboard" tooltipEvent="focus" tooltipPosition="bottom" [tooltipDisabled]="codeDisabled"><i class="pi pi-copy"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-content">
|
||||
<div [class]="containerClass" [ngStyle]="previewStyle" *ngIf="blockView == BlockView.PREVIEW">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div *ngIf="blockView == BlockView.CODE && !codeDisabled">
|
||||
<app-code lang="markup" ngPreserveWhitespaces>{{code}}</app-code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./app.blockviewer.component.scss']
|
||||
})
|
||||
export class BlockViewer {
|
||||
|
||||
@Input() header: string;
|
||||
|
||||
@Input() code: string;
|
||||
|
||||
@Input() containerClass: string;
|
||||
|
||||
@Input() previewStyle: string;
|
||||
|
||||
@Input() free: boolean = false;
|
||||
|
||||
@Input() new: boolean = false;
|
||||
|
||||
BlockView = BlockView;
|
||||
|
||||
blockView: BlockView = BlockView.PREVIEW;
|
||||
|
||||
activateView(event: Event, blockView: BlockView) {
|
||||
if (!this.codeDisabled) {
|
||||
this.blockView = blockView;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
async copyCode(event: Event) {
|
||||
if (!this.codeDisabled) {
|
||||
await navigator.clipboard.writeText(this.code);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
get codeDisabled() {
|
||||
return this.free ? false : (environment ? environment.production: false);
|
||||
}
|
||||
|
||||
}
|
||||
@ -21,7 +21,6 @@ i:not([class~="pi"]) {
|
||||
letter-spacing: .5px;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
:host ::ng-deep pre[class*="language-"] {
|
||||
@ -33,10 +32,11 @@ i:not([class~="pi"]) {
|
||||
}
|
||||
|
||||
code {
|
||||
border-left: 10px solid var(--surface-d) !important;
|
||||
border-left: 0px solid var(--surface-d) !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-b) !important;
|
||||
margin: 1em 0;
|
||||
margin: 0 !important;
|
||||
padding-bottom: 1.5rem;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@ export class AppMenuComponent implements OnInit {
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: 'UI Kit',
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout']},
|
||||
{label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input']},
|
||||
@ -55,6 +55,19 @@ export class AppMenuComponent implements OnInit {
|
||||
{label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc']}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'UI Blocks',
|
||||
items:[
|
||||
{label: 'Free Blocks', icon: 'pi pi-fw pi-eye', routerLink: ['/blocks'],
|
||||
badge:'NEW'},
|
||||
{label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: ['https://www.primefaces.org/primeblocks-ng/#/']},
|
||||
]
|
||||
},
|
||||
{label:'Icons',
|
||||
items:[
|
||||
{label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', routerLink: ['/icons']},
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
items: [
|
||||
|
||||
@ -25,7 +25,7 @@ import {AppMainComponent} from './app.main.component';
|
||||
[routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0" pRipple>
|
||||
<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
|
||||
<span>{{item.label}}</span>
|
||||
<span class="menuitem-badge" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<span class="p-tag p-badge ml-auto" *ngIf="item.badge">{{item.badge}}</span>
|
||||
<i class="pi pi-fw {{active ? 'pi-angle-up' : 'pi-angle-down'}} ml-auto" *ngIf="item.items"></i>
|
||||
</a>
|
||||
<ul *ngIf="(item.items && active) && item.visible !== false" [@children]="(active ? 'visibleAnimated' : 'hiddenAnimated')">
|
||||
|
||||
@ -86,6 +86,7 @@ import {TooltipModule} from 'primeng/tooltip';
|
||||
import {TreeModule} from 'primeng/tree';
|
||||
import {TreeTableModule} from 'primeng/treetable';
|
||||
import {VirtualScrollerModule} from 'primeng/virtualscroller';
|
||||
import {BlockViewer} from './app.blockviewer.component'
|
||||
|
||||
import {AppCodeModule} from './app.code.component';
|
||||
import {AppComponent} from './app.component';
|
||||
@ -115,6 +116,8 @@ import {FileDemoComponent} from './demo/view/filedemo.component';
|
||||
import {DocumentationComponent} from './demo/view/documentation.component';
|
||||
import {AppCrudComponent} from './pages/app.crud.component';
|
||||
import {AppTimelineDemoComponent} from './pages/app.timelinedemo.component';
|
||||
import {IconsDemoComponent} from './demo/view/iconsdemo.component';
|
||||
import {AppBlocksDemoComponent} from './demo/view/app.blocksdemo.component';
|
||||
|
||||
import {CountryService} from './demo/service/countryservice';
|
||||
import {CustomerService} from './demo/service/customerservice';
|
||||
@ -222,7 +225,7 @@ FullCalendarModule.registerPlugins([
|
||||
TreeModule,
|
||||
TreeTableModule,
|
||||
VirtualScrollerModule,
|
||||
AppCodeModule
|
||||
AppCodeModule,
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
@ -250,9 +253,12 @@ FullCalendarModule.registerPlugins([
|
||||
ChartsDemoComponent,
|
||||
EmptyDemoComponent,
|
||||
FileDemoComponent,
|
||||
IconsDemoComponent,
|
||||
DocumentationComponent,
|
||||
AppCrudComponent,
|
||||
AppTimelineDemoComponent,
|
||||
AppBlocksDemoComponent,
|
||||
BlockViewer
|
||||
],
|
||||
providers: [
|
||||
{provide: LocationStrategy, useClass: HashLocationStrategy},
|
||||
|
||||
409
src/app/demo/view/app.blocksdemo.component.html
Normal file
409
src/app/demo/view/app.blocksdemo.component.html
Normal file
@ -0,0 +1,409 @@
|
||||
<block-viewer header="Hero" [code]="block1">
|
||||
<div class="grid grid-nogutter surface-section text-800">
|
||||
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
|
||||
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 overflow-hidden">
|
||||
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Feature" [code]="block2">
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
|
||||
<div class="mb-3 font-bold text-2xl">
|
||||
<span class="text-900">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Built for Developers</div>
|
||||
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Easy to Use</div>
|
||||
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
|
||||
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Open Source</div>
|
||||
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
|
||||
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Pricing" [code]="block3">
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
|
||||
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$9</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$29</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$49</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Call to Action" [code]="block4">
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-700 text-center">
|
||||
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
|
||||
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Banner" [code]="block5" containerClass="surface-section py-8">
|
||||
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
|
||||
<div class="font-bold mr-8">🔥 Hot Deals!</div>
|
||||
<div class="align-items-center hidden lg:flex">
|
||||
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex align-items-center ml-2 mr-8">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
|
||||
<block-viewer header="Page Heading" [code]="block6">
|
||||
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
|
||||
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
|
||||
<li>
|
||||
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-500 line-height-3"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-900 line-height-3">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-900">Customers</div>
|
||||
<div class="flex align-items-center text-700 flex-wrap">
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Stats" [code]="block7">
|
||||
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Sign-In" [code]="block8" containerClass="surface-ground px-4 py-8 md:px-6 lg:px-8 flex align-items-center justify-content-center">
|
||||
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
|
||||
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" pInputText class="w-full mb-3">
|
||||
|
||||
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
|
||||
<input id="password1" type="password" pInputText class="w-full mb-3">
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-6">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
|
||||
</div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Description List" [code]="block9" containerClass="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="surface-section">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
|
||||
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
|
||||
<p-chip label="Crime" class="mr-2"></p-chip>
|
||||
<p-chip label="Drama" class="mr-2"></p-chip>
|
||||
<p-chip label="Thriller"></p-chip>
|
||||
</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</block-viewer>
|
||||
|
||||
<block-viewer header="Card" [code]="block10" containerClass="px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
|
||||
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
|
||||
</div>
|
||||
</block-viewer>
|
||||
0
src/app/demo/view/app.blocksdemo.component.scss
Normal file
0
src/app/demo/view/app.blocksdemo.component.scss
Normal file
408
src/app/demo/view/app.blocksdemo.component.ts
Normal file
408
src/app/demo/view/app.blocksdemo.component.ts
Normal file
@ -0,0 +1,408 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
templateUrl: './app.blocksdemo.component.html',
|
||||
styleUrls: ['./app.blocksdemo.component.scss']
|
||||
})
|
||||
export class AppBlocksDemoComponent{
|
||||
|
||||
block1: string = `
|
||||
<div class="grid grid-nogutter surface-section text-800">
|
||||
<div class="col-12 md:col-6 p-6 text-center md:text-left flex align-items-center ">
|
||||
<section>
|
||||
<span class="block text-6xl font-bold mb-1">Create the screens your</span>
|
||||
<div class="text-6xl text-primary font-bold mb-3">your visitors deserve to see</div>
|
||||
<p class="mt-0 mb-4 text-700 line-height-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
|
||||
<button pButton pRipple label="Learn More" type="button" class="mr-3 p-button-raised"></button>
|
||||
<button pButton pRipple label="Live Demo" type="button" class="p-button-outlined"></button>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 overflow-hidden">
|
||||
<img src="assets/demo/images/blocks/hero/hero-1.png" alt="Image" class="md:ml-auto block md:h-full" style="clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%)">
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block2: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
|
||||
<div class="mb-3 font-bold text-2xl">
|
||||
<span class="text-900">One Product, </span>
|
||||
<span class="text-blue-600">Many Solutions</span>
|
||||
</div>
|
||||
<div class="text-700 text-sm mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-desktop text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Built for Developers</div>
|
||||
<span class="text-700 text-sm line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-lock text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
|
||||
<span class="text-700 text-sm line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-check-circle text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Easy to Use</div>
|
||||
<span class="text-700 text-sm line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-globe text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Fast & Global Support</div>
|
||||
<span class="text-700 text-sm line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 mb-4 px-5">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-github text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Open Source</div>
|
||||
<span class="text-700 text-sm line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
|
||||
</div>
|
||||
<div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
|
||||
<span class="p-3 shadow-2 mb-3 inline-block surface-card" style="border-radius: 10px">
|
||||
<i class="pi pi-shield text-4xl text-blue-500"></i>
|
||||
</span>
|
||||
<div class="text-900 mb-3 font-medium">Trusted Securitty</div>
|
||||
<span class="text-700 text-sm line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block3: string = `
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-900 font-bold text-6xl mb-4 text-center">Pricing Plans</div>
|
||||
<div class="text-700 text-xl mb-6 text-center line-height-3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Basic</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$9</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full mt-auto"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Premium</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$29</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="p-3 h-full">
|
||||
<div class="shadow-2 p-3 flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="text-900 font-medium text-xl mb-2">Enterprise</div>
|
||||
<div class="text-600">Plan description</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<div class="flex align-items-center">
|
||||
<span class="font-bold text-2xl text-900">$49</span>
|
||||
<span class="ml-2 font-medium text-600">per month</span>
|
||||
</div>
|
||||
<hr class="my-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<ul class="list-none p-0 m-0 flex-grow-1">
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-3">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
|
||||
<button pButton pRipple label="Buy Now" class="p-3 w-full p-button-outlined"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block4: string = `
|
||||
<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="text-700 text-center">
|
||||
<div class="text-blue-600 font-bold mb-3"><i class="pi pi-discord"></i> POWERED BY DISCORD</div>
|
||||
<div class="text-900 font-bold text-5xl mb-3">Join Our Design Community</div>
|
||||
<div class="text-700 text-2xl mb-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit numquam eligendi quos.</div>
|
||||
<button pButton pRipple label="Join Now" icon="pi pi-discord" class="font-bold px-5 py-3 p-button-raised p-button-rounded white-space-nowrap"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block5: string = `
|
||||
<div class="bg-bluegray-900 text-gray-100 p-3 flex justify-content-between lg:justify-content-center align-items-center flex-wrap">
|
||||
<div class="font-bold mr-8">🔥 Hot Deals!</div>
|
||||
<div class="align-items-center hidden lg:flex">
|
||||
<span class="line-height-3">Libero voluptatum atque exercitationem praesentium provident odit.</span>
|
||||
</div>
|
||||
<a class="flex align-items-center ml-2 mr-8">
|
||||
<a class="text-white" href="#"><span class="underline font-bold">Learn More</span></a>
|
||||
</a>
|
||||
<a pRipple class="flex align-items-center no-underline justify-content-center border-circle text-gray-50 hover:bg-bluegray-700 cursor-pointer transition-colors transition-duration-150" style="width:2rem; height: 2rem">
|
||||
<i class="pi pi-times"></i>
|
||||
</a>
|
||||
</div>`;
|
||||
|
||||
block6: string = `
|
||||
<div class="surface-section px-4 py-5 md:px-6 lg:px-8">
|
||||
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
|
||||
<li>
|
||||
<a class="text-500 no-underline line-height-3 cursor-pointer">Application</a>
|
||||
</li>
|
||||
<li class="px-2">
|
||||
<i class="pi pi-angle-right text-500 line-height-3"></i>
|
||||
</li>
|
||||
<li>
|
||||
<span class="text-900 line-height-3">Analytics</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
|
||||
<div>
|
||||
<div class="font-medium text-3xl text-900">Customers</div>
|
||||
<div class="flex align-items-center text-700 flex-wrap">
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-users mr-2"></i>
|
||||
<span>332 Active Users</span>
|
||||
</div>
|
||||
<div class="mr-5 flex align-items-center mt-3">
|
||||
<i class="pi pi-globe mr-2"></i>
|
||||
<span>9402 Sessions</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
<span>2.32m Avg. Duration</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 lg:mt-0">
|
||||
<button pButton pRipple label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"></button>
|
||||
<button pButton pRipple label="Save" icon="pi pi-check"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block7: string = `
|
||||
<div class="surface-ground px-4 py-5 md:px-6 lg:px-8">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Orders</span>
|
||||
<div class="text-900 font-medium text-xl">152</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-blue-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">24 new </span>
|
||||
<span class="text-500">since last visit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Revenue</span>
|
||||
<div class="text-900 font-medium text-xl">$2.100</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-map-marker text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">%52+ </span>
|
||||
<span class="text-500">since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Customers</span>
|
||||
<div class="text-900 font-medium text-xl">28441</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-cyan-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-inbox text-cyan-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">520 </span>
|
||||
<span class="text-500">newly registered</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card shadow-2 p-3 border-round">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Comments</span>
|
||||
<div class="text-900 font-medium text-xl">152 Unread</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-purple-100 border-round" style="width:2.5rem;height:2.5rem">
|
||||
<i class="pi pi-comment text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">85 </span>
|
||||
<span class="text-500">responded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block8: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-6">
|
||||
<div class="text-center mb-5">
|
||||
<img src="assets/demo/images/blocks/logos/hyper.svg" alt="Image" height="50" class="mb-3">
|
||||
<div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
|
||||
<span class="text-600 font-medium line-height-3">Don't have an account?</span>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create today!</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-900 font-medium mb-2">Email</label>
|
||||
<input id="email1" type="text" pInputText class="w-full mb-3">
|
||||
|
||||
<label for="password1" class="block text-900 font-medium mb-2">Password</label>
|
||||
<input id="password1" type="password" pInputText class="w-full mb-3">
|
||||
|
||||
<div class="flex align-items-center justify-content-between mb-6">
|
||||
<div class="flex align-items-center">
|
||||
<p-checkbox id="rememberme1" [binary]="true" styleClass="mr-2"></p-checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
|
||||
</div>
|
||||
|
||||
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
block9: string = `
|
||||
<div class="surface-section">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Movie Information</div>
|
||||
<div class="text-500 mb-5">Morbi tristique blandit turpis. In viverra ligula id nulla hendrerit rutrum.</div>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Title</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Heat</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Genre</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">
|
||||
<p-chip label="Crime" class="mr-2"></p-chip>
|
||||
<p-chip label="Drama" class="mr-2"></p-chip>
|
||||
<p-chip label="Thriller"></p-chip>
|
||||
</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Director</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Michael Mann</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Actors</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1">Robert De Niro, Al Pacino</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 border-top-1 border-bottom-1 surface-border flex-wrap">
|
||||
<div class="text-500 w-6 md:w-2 font-medium">Plot</div>
|
||||
<div class="text-900 w-full md:w-8 md:flex-order-0 flex-order-1 line-height-3">
|
||||
A group of professional bank robbers start to feel the heat from police
|
||||
when they unknowingly leave a clue at their latest heist.</div>
|
||||
<div class="w-6 md:w-2 flex justify-content-end">
|
||||
<button pButton pRipple label="Edit" icon="pi pi-pencil" class="p-button-text"></button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>`;
|
||||
|
||||
block10: string = `
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="text-3xl font-medium text-900 mb-3">Card Title</div>
|
||||
<div class="font-medium text-500 mb-3">Vivamus id nisl interdum, blandit augue sit amet, eleifend mi.</div>
|
||||
<div style="height: 150px" class="border-2 border-dashed surface-border"></div>
|
||||
</div>`;
|
||||
|
||||
}
|
||||
@ -76,7 +76,7 @@
|
||||
<ng-template pTemplate="body" let-product>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="100">
|
||||
<img src="../../../assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">
|
||||
</td>
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{product.price | currency:'USD'}}</td>
|
||||
|
||||
@ -13,36 +13,36 @@
|
||||
<h4>Dependencies</h4>
|
||||
<p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install -g @angular/cli
|
||||
</app-code>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install -g @angular/cli
|
||||
</app-code>
|
||||
|
||||
<p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
|
||||
install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
cd sakai-ng
|
||||
npm install
|
||||
ng serve
|
||||
</app-code>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
cd sakai-ng
|
||||
npm install
|
||||
ng serve
|
||||
</app-code>
|
||||
|
||||
<p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
|
||||
|
||||
<h4>Important CLI Commands</h4>
|
||||
<p>Following commands are derived from CLI.</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
Run 'ng serve' for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
||||
|
||||
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
||||
Run 'ng generate component component-name' to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
|
||||
|
||||
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
Run 'ng build' to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
|
||||
|
||||
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
|
||||
|
||||
Run 'ng help' for more options.
|
||||
</app-code>
|
||||
Run 'ng help' for more options.
|
||||
</app-code>
|
||||
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
|
||||
@ -204,18 +204,18 @@ export class AppMenuComponent implements OnInit, AfterViewInit {
|
||||
</ul>
|
||||
|
||||
<p>Install PrimeNG</p>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install primeng@latest --save
|
||||
npm install primeicons@latest --save
|
||||
</app-code>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
npm install primeng@latest --save
|
||||
npm install primeicons@latest --save
|
||||
</app-code>
|
||||
|
||||
<p>Add PrimeNG CSS at styles section in angular.json.</p>
|
||||
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
"styles": [
|
||||
"styles.scss" //your styles and overrides
|
||||
],
|
||||
</app-code>
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
|
||||
"styles": [
|
||||
"styles.scss" //your styles and overrides
|
||||
],
|
||||
</app-code>
|
||||
|
||||
<p>Last part is adding theme and layout css files, in the CLI app they are defined using link tags in index.html so the demo can switch them on
|
||||
the fly by changing the path however if this is not a requirement, you may also add them to the styles configuration above so they go inside the bundle.</p>
|
||||
@ -326,7 +326,6 @@ $menuTooltipTextColor:#ffffff !default;
|
||||
<div style="height:400px;overflow: auto;">
|
||||
<app-code ngPreserveWhitespaces ngNonBindable lang="css">
|
||||
//reused color variables
|
||||
//reused color variables
|
||||
$shade000:#ffffff !default; //surface
|
||||
$shade100:#FCFCFC !default; //header background
|
||||
$shade200:rgba($primaryColor,.2) !default; //hover background
|
||||
|
||||
57
src/app/demo/view/iconsdemo.component.html
Normal file
57
src/app/demo/view/iconsdemo.component.html
Normal file
@ -0,0 +1,57 @@
|
||||
<div class="card">
|
||||
<h4>Icons</h4>
|
||||
|
||||
<h5>Download</h5>
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
npm install primeicons --save
|
||||
</app-code>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>.
|
||||
A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: .5rem"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
|
||||
<h5>Size</h5>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>Spinning Animation</h5>
|
||||
<p>Special pi-spin class applies infinite rotate to an icon.</p>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>List of Icons</h5>
|
||||
<p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
|
||||
<div>
|
||||
<input class="icon-filter" (input)="onFilter($event)" pInputText placeholder="Search an icon">
|
||||
</div>
|
||||
|
||||
<div class="grid icons-list">
|
||||
<div class="md:col-2 sm:col-12 md-2" *ngFor="let icon of filteredIcons">
|
||||
<i class="pi pi-{{icon.properties.name}}"></i>
|
||||
<div>pi-{{icon.properties.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
19
src/app/demo/view/iconsdemo.component.scss
Normal file
19
src/app/demo/view/iconsdemo.component.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.icon-filter {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-color-secondary);
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.md-2 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
53
src/app/demo/view/iconsdemo.component.ts
Normal file
53
src/app/demo/view/iconsdemo.component.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { IconService } from '../service/iconservice';
|
||||
|
||||
@Component({
|
||||
selector: 'app-iconsdemo',
|
||||
templateUrl: './iconsdemo.component.html',
|
||||
styleUrls: ['./iconsdemo.component.scss']
|
||||
})
|
||||
export class IconsDemoComponent implements OnInit {
|
||||
|
||||
icons: any[];
|
||||
|
||||
filteredIcons: any[];
|
||||
|
||||
selectedIcon: any;
|
||||
|
||||
constructor(private iconService : IconService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.iconService.getIcons().subscribe(data => {
|
||||
data = data.filter(value => {
|
||||
return value.icon.tags.indexOf('deprecate') === -1;
|
||||
});
|
||||
|
||||
let icons = data;
|
||||
icons.sort((icon1, icon2) => {
|
||||
if(icon1.properties.name < icon2.properties.name)
|
||||
return -1;
|
||||
else if(icon1.properties.name < icon2.properties.name)
|
||||
return 1;
|
||||
else
|
||||
return 0;
|
||||
});
|
||||
|
||||
this.icons = icons;
|
||||
this.filteredIcons = data;
|
||||
});
|
||||
}
|
||||
|
||||
onFilter(event: KeyboardEvent): void {
|
||||
const searchText = (event.target as HTMLInputElement).value;
|
||||
|
||||
if (!searchText) {
|
||||
this.filteredIcons = this.icons;
|
||||
}
|
||||
else {
|
||||
this.filteredIcons = this.icons.filter( it => {
|
||||
return it.icon.tags[0].includes(searchText);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,197 +1,139 @@
|
||||
<div class="grid table-demo">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<p>Pagination, sorting, filtering and checkbox selection.</p>
|
||||
<p-table #dt [value]="customers1" [(selection)]="selectedCustomers1" dataKey="id"
|
||||
responsiveLayout="scroll"
|
||||
styleClass="p-datatable-customers p-datatable-selectable" [rowHover]="true" [rows]="10" [paginator]="true"
|
||||
[filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<h5>Filter Menu</h5>
|
||||
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [showCurrentPageReport]="true" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header md:align-items-end">
|
||||
<h6>
|
||||
List of Customers
|
||||
</h6>
|
||||
<span class="p-input-icon-left">
|
||||
<div class="flex">
|
||||
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
|
||||
<span class="p-input-icon-left ml-auto">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
<input pInputText type="text" #filter (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 3rem">
|
||||
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
|
||||
</th>
|
||||
<th pSortableColumn="name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
<p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
<p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Agent
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
<p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="header">
|
||||
<div class="px-3 pt-3 pb-0">
|
||||
<span class="p-text-bold">Agent Picker</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
|
||||
<ng-template let-option pTemplate="item">
|
||||
<div class="p-multiselect-representative-option">
|
||||
<img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="ml-1">{{option.name}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="date">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
<p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="status">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Balance
|
||||
<p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
<p-columnFilter field="status" matchMode="equals" display="menu">
|
||||
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
|
||||
<p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
|
||||
<ng-template let-option pTemplate="item">
|
||||
<span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
|
||||
</ng-template>
|
||||
</p-dropdown>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th pSortableColumn="activity">
|
||||
<div class="flex align-items-center">
|
||||
<th>
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
<p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
|
||||
<ng-template pTemplate="filter" let-filter="filterCallback">
|
||||
<p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
|
||||
<div class="flex align-items-center justify-content-between px-2">
|
||||
<span>{{activityValues[0]}}</span>
|
||||
<span>{{activityValues[1]}}</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem">
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
Verified
|
||||
<p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
|
||||
</div>
|
||||
</th>
|
||||
<th style="width: 8rem"></th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr class="p-selectable-row">
|
||||
<td>
|
||||
<p-tableCheckbox [value]="customer"></p-tableCheckbox>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Name</span>
|
||||
<tr>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</span>
|
||||
<div>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</div>
|
||||
<td style="min-width: 200px;">
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text ml-2">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<div>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
</div>
|
||||
<td style="min-width: 200px;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle"/>
|
||||
<span class="image-text ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.date | date: 'MM/dd/yyyy'}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Status</span>
|
||||
<td style="min-width: 200px;">
|
||||
{{customer.balance | currency:'USD':'symbol'}}
|
||||
</td>
|
||||
<td style="min-width: 200px;">
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Activity</span>
|
||||
<td style="min-width: 200px;">
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
<td style="text-align: center">
|
||||
<button pButton type="button" class="p-button-secondary" icon="pi pi-cog"></button>
|
||||
<td class="text-center" style="min-width: 50px;">
|
||||
<i class="pi" [ngClass]="{'true-icon pi-check-circle text-green-500': customer.verified, 'false-icon pi-times-circle text-pink-500 ': !customer.verified}"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
<td colspan="7">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Customized</h5>
|
||||
<p>Scrollable table with gridlines (<mark>.p-datatable-gridlines</mark>), striped rows (<mark>.p-datatable-striped</mark>) and smaller paddings (<mark>p-datatable-sm</mark>).</p>
|
||||
<p-table #dtc [value]="customers2" [(selection)]="selectedCustomer" dataKey="id" selectionMode="single"
|
||||
styleClass="p-datatable-customers p-datatable-gridlines p-datatable-striped p-datatable-sm" responsiveLayout="scroll"
|
||||
[scrollable]="true" scrollHeight="600px" [filterDelay]="0" [globalFilterFields]="['name','country.name','representative.name','status']">
|
||||
<ng-template pTemplate="caption">
|
||||
<div class="flex flex-sm-column flex-md-row justify-content-md-between table-header">
|
||||
List of Customers
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Global Search"/>
|
||||
</span>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th pSortableColumn="name">Name
|
||||
<p-sortIcon field="name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="country.name">Country
|
||||
<p-sortIcon field="country.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="representative.name">Representative
|
||||
<p-sortIcon field="representative.name"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="date">Date
|
||||
<p-sortIcon field="date"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="status">Status
|
||||
<p-sortIcon field="status"></p-sortIcon>
|
||||
</th>
|
||||
<th pSortableColumn="activity">Activity
|
||||
<p-sortIcon field="activity"></p-sortIcon>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr [pSelectableRow]="customer">
|
||||
<td>
|
||||
<span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png"
|
||||
[class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Representative</span>
|
||||
<img [alt]="customer.representative.name"
|
||||
src="assets/demo/images/avatar/{{customer.representative.image}}" width="32"
|
||||
style="vertical-align: middle"/>
|
||||
<span class="image-text" style="margin-left: .5em;vertical-align: middle">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="p-column-title">Activity</span>
|
||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="emptymessage">
|
||||
<tr>
|
||||
<td colspan="8">No customers found.</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
@ -203,7 +145,7 @@
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width:200px" pFrozenColumn>Name</th>
|
||||
<th style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
|
||||
<th style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">Id</th>
|
||||
<th style="width:200px">Country</th>
|
||||
<th style="width:200px">Date</th>
|
||||
<th style="width:200px">Company</th>
|
||||
@ -216,7 +158,7 @@
|
||||
<ng-template pTemplate="body" let-customer>
|
||||
<tr>
|
||||
<td style="width:200px" pFrozenColumn>{{customer.name}}</td>
|
||||
<td style="width:100px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
|
||||
<td style="width:200px" alignFrozen="left" pFrozenColumn [frozen]="idFrozen">{{customer.id}}</td>
|
||||
<td style="width:200px">{{customer.country.name}}</td>
|
||||
<td style="width:200px">{{customer.date}}</td>
|
||||
<td style="width:200px">{{customer.company}}</td>
|
||||
@ -305,7 +247,7 @@
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Row Group and Scrolling</h5>
|
||||
<h5>Subheader Grouping</h5>
|
||||
<p-table [value]="customers3" sortField="representative.name" sortMode="single" (onSort)="onSort()" responsiveLayout="scroll" [scrollable]="true" scrollHeight="600px"
|
||||
styleClass="p-datatable-customers">
|
||||
<ng-template pTemplate="header">
|
||||
@ -319,26 +261,26 @@
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
|
||||
<tr *ngIf="rowGroupMetadata[customer.representative.name].index === rowIndex">
|
||||
<td colspan="5">
|
||||
<td colspan="5" style="min-width: 200px;">
|
||||
<img [alt]="customer.representative.name" src="assets/demo/images/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
|
||||
<span class="p-text-bold ml-2">{{customer.representative.name}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="p-column-title">Name</span>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Name</span>
|
||||
{{customer.name}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Country</span>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Country</span>
|
||||
<img src="assets/demo/flags/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
|
||||
<span class="image-text" style="margin-left: .5em">{{customer.country.name}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Company</span>
|
||||
<td style="min-width: 300px;"><span class="p-column-title">Company</span>
|
||||
{{customer.company}}
|
||||
</td>
|
||||
<td><span class="p-column-title">Status</span>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Status</span>
|
||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||
</td>
|
||||
<td><span class="p-column-title">Date</span>
|
||||
<td style="min-width: 220px;"><span class="p-column-title">Date</span>
|
||||
{{customer.date}}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import {Component, OnInit, ViewChild, ChangeDetectorRef} from '@angular/core';
|
||||
import {Component, OnInit, ViewChild, ChangeDetectorRef, ElementRef} from '@angular/core';
|
||||
import {Customer, Representative} from '../domain/customer';
|
||||
import {CustomerService} from '../service/customerservice';
|
||||
import {Product} from '../domain/product';
|
||||
import {ProductService} from '../service/productservice';
|
||||
import {Table} from 'primeng/table';
|
||||
import {InputText} from 'primeng/inputtext';
|
||||
import { MessageService, ConfirmationService } from 'primeng/api'
|
||||
|
||||
@Component({
|
||||
@ -51,13 +52,19 @@ export class TableDemoComponent implements OnInit {
|
||||
|
||||
idFrozen: boolean = false;
|
||||
|
||||
loading:boolean = true;
|
||||
|
||||
@ViewChild('dt') table: Table;
|
||||
|
||||
@ViewChild('filter') filter: ElementRef;
|
||||
|
||||
constructor(private customerService: CustomerService, private productService: ProductService, private messageService: MessageService, private confirmService: ConfirmationService, private cd: ChangeDetectorRef) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.customerService.getCustomersLarge().then(customers => {
|
||||
this.customers1 = customers;
|
||||
this.loading = false;
|
||||
|
||||
// @ts-ignore
|
||||
this.customers1.forEach(customer => customer.date = new Date(customer.date));
|
||||
});
|
||||
@ -130,4 +137,9 @@ export class TableDemoComponent implements OnInit {
|
||||
formatCurrency(value) {
|
||||
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
|
||||
}
|
||||
|
||||
clear(table: Table) {
|
||||
table.clear();
|
||||
this.filter.nativeElement.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/demo/images/blocks/hero/hero-1.png
Normal file
BIN
src/assets/demo/images/blocks/hero/hero-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
3
src/assets/demo/images/blocks/logos/hyper.svg
Normal file
3
src/assets/demo/images/blocks/logos/hyper.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="48" height="50" viewBox="0 0 48 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.1548 9.65956L23.9913 4.86169L5.54723 14.5106L0.924465 12.0851L23.9913 0L37.801 7.23403L33.1548 9.65956ZM23.9931 19.3085L42.4255 9.65955L47.0717 12.0851L23.9931 24.1595L10.1952 16.9361L14.8297 14.5106L23.9931 19.3085ZM4.6345 25.8937L0 23.4681V37.9149L23.0669 50V45.1489L4.6345 35.4894V25.8937ZM18.4324 28.2658L0 18.6169V13.7658L23.0669 25.8403V40.2977L18.4324 37.8615V28.2658ZM38.7301 23.468V18.6169L24.9205 25.8403V49.9999L29.555 47.5743V28.2659L38.7301 23.468ZM43.3546 35.4892V16.1914L48.0008 13.7659V37.9148L34.1912 45.1488V40.2977L43.3546 35.4892Z" fill="#616161"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 724 B |
@ -240,7 +240,7 @@ a {
|
||||
}
|
||||
.layout-menu li .layout-menuitem-root-text {
|
||||
text-transform: uppercase;
|
||||
color: var(--text-color-secondary);
|
||||
color: var(--surface-900);
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
@ -273,6 +273,7 @@ a {
|
||||
}
|
||||
.layout-menu li a.router-link-exact-active {
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.layout-menu li.active-menuitem > a .menuitem-toggle-icon:before {
|
||||
content: "\e933";
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
.layout-menuitem-root-text {
|
||||
text-transform: uppercase;
|
||||
color:var(--text-color-secondary);
|
||||
color:var(--surface-900);
|
||||
font-weight: 600;
|
||||
margin-bottom: .5rem;
|
||||
font-size: .875rem;
|
||||
@ -65,6 +65,7 @@
|
||||
|
||||
&.router-link-exact-active {
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sakai PrimeNG</title>
|
||||
<title>Sakai - PrimeNG</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user