f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New code display

Browse Source
This commit is contained in:
Cagatay Civici 2022-12-06 11:49:15 +03:00
parent 65da59874b
commit 91eb738476
13 changed files with 433 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/demo/components/code/code.component.ts
View File

@ -1,19 +0,0 @@
import { Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-code',
template: `
<pre class="surface-ground p-5 border-round mb-3"><code class="-mt-4 p-0 line-height-3 block overflow-auto" [ngStyle]="{'font-family': 'monaco, Consolas, monospace'}"><ng-content></ng-content></code></pre>
`
})
export class AppCodeComponent {
}
@NgModule({
imports: [CommonModule],
exports: [AppCodeComponent],
declarations: [AppCodeComponent]
})
export class AppCodeModule { }

29
src/app/demo/components/documentation/documentation.component.html
View File

@ -4,25 +4,21 @@
<h4>Getting Started</h4>
<p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v14 with PrimeNG v14. In case CLI is not installed already, use the command below to set it up.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="markup">
npm install -g @angular/cli
</app-code>
<pre class="app-code"><code>npm install -g @angular/cli</code></pre>
<p>Once CLI is ready in your system, extract the contents of the 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
<pre class="app-code"><code>cd sakai
npm install
ng serve
</app-code>
ng serve</code></pre>
<p>The application should run at <span class="font-semibold">http://localhost:4200/</span>, you may now start with the development of your application.</p>
<h5>Important CLI Commands</h5>
<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.
<pre class="app-code"><code>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`.
@ -32,8 +28,7 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.
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.</code></pre>
<h4>Structure</h4>
<p>Sakai consists of 3 main parts; the application layout, layout assets and PrimeNG component theme assets. Layout is placed inside the <span class="text-primary font-medium">src/app/layout</span> folder,
@ -46,8 +41,7 @@ Run 'ng help' for more options.
initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values
to avoid sync issues. </p>
<app-code ngPreserveWhitespaces ngNonBindable lang="javascript">
import &#123; Component, OnInit &#125; from '@angular/core';
<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; LayoutService &#125; from './layout/service/app.layout.service';
@ -73,15 +67,13 @@ export class AppComponent implements OnInit &#123;
&#125;;
&#125;
&#125;
</app-code>
&#125;</code></pre>
<h5>Menu</h5>
<p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems,
navigate to this file and define your own model as a nested structure.</p>
<app-code ngPreserveWhitespaces ngNonBindable lang="javascript">
import &#123; OnInit &#125; from '@angular/core';
<pre class="app-code"><code>import &#123; OnInit &#125; from '@angular/core';
import &#123; Component &#125; from '@angular/core';
@Component(&#123;
@ -107,8 +99,7 @@ export class AppMenuComponent implements OnInit &#123;
//...
];
&#125;
&#125;
</app-code>
&#125;</code></pre>
<h4>Integration with Existing Angular CLI Projects</h4>
<p>Sakai structure is designed in a modular way so that it can easily be integrated with your existing application. We've created a short tutorial with details.</p>

16
src/app/demo/components/documentation/documentation.component.scss Normal file
View File

@ -0,0 +1,16 @@
@media screen and (max-width: 991px) {
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}

3
src/app/demo/components/documentation/documentation.component.ts
View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
@Component({
templateUrl: './documentation.component.html'
templateUrl: './documentation.component.html',
styleUrls: ['./documentation.component.scss']
})
export class DocumentationComponent { }

2
src/app/demo/components/documentation/documentation.module.ts
View File

@ -1,13 +1,11 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DocumentationRoutingModule } from './documentation-routing.module';
import { AppCodeModule } from '../code/code.component';
import { DocumentationComponent } from './documentation.component';
@NgModule({
imports: [
CommonModule,
AppCodeModule,
DocumentationRoutingModule
],
declarations: [DocumentationComponent]

722
src/app/demo/components/primeblocks/blocks/blocks.component.ts
View File

@ -3,397 +3,405 @@ import { Component } from '@angular/core';
@Component({
templateUrl: './blocks.component.html'
})
export class BlocksComponent {
export class BlocksComponent{
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>`;
<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 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="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 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>`;
<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 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>`;
<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>&nbsp;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>`;
<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>&nbsp;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>`;
<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 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 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>`;
<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 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>
<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 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>
<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>
<span class="text-green-500 font-medium">24 new </span>
<span class="text-500">since last visit</span>
</div>
</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 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>
<button pButton pRipple label="Sign In" icon="pi pi-user" class="w-full"></button>
<a class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer">Forgot password?</a>
</div>
</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>`;
<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>`;
<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>`;
}
}

40
src/app/demo/components/primeblocks/blockviewer/blockviewer.component.scss
View File

@ -1,14 +1,13 @@
.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);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border:1px solid var(--surface-border);
display: flex;
align-items: center;
justify-content: space-between;
@ -42,7 +41,6 @@
margin-right: .75rem;
padding: .5rem 1rem;
border-radius: 4px;
font-weight: 600;
border: 1px solid transparent;
transition: background-color .2s;
cursor: pointer;
@ -52,7 +50,7 @@
}
&:not(.block-action-disabled):hover {
background-color: var(--surface-c);
background-color: var(--surface-hover);
}
&.block-action-active {
@ -81,29 +79,17 @@
.block-content {
padding: 0;
border:1px solid var(--surface-d);
border:1px solid var(--surface-border);
border-top: 0 none;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
overflow: hidden;
}
:host ::ng-deep pre[class*="language-"] {
margin: 0 !important;
border-radius: 0 !important;
pre.app-code {
background-color: var(--surface-card) !important;
padding-bottom: 1rem !important;
margin-bottom: 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;
code {
padding: 1rem 2.5rem;
}
}
}
@ -117,4 +103,4 @@
margin-left: 0;
}
}
}
}

3
src/app/demo/components/primeblocks/blockviewer/blockviewer.component.ts
View File

@ -30,8 +30,7 @@ enum BlockView {
<ng-content></ng-content>
</div>
<div *ngIf="blockView === BlockView.CODE">
<app-code lang="markup" ngPreserveWhitespaces>{{code}}
</app-code>
<pre class="app-code"><code>{{code}}</code></pre>
</div>
</div>
</div>

5
src/app/demo/components/primeblocks/primeblocks.module.ts
View File

@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
import { BlocksComponent } from './blocks/blocks.component';
import { PrimeBlocksRoutingModule } from './primeblocks-routing.module';
import { BlockViewerComponent } from './blockviewer/blockviewer.component'
import { AppCodeModule } from '../code/code.component';
import { ChipModule } from 'primeng/chip';
import { CheckboxModule } from 'primeng/checkbox';
import { ButtonModule } from 'primeng/button';
@ -16,7 +15,6 @@ import { TooltipModule } from 'primeng/tooltip';
@NgModule({
imports: [
CommonModule,
AppCodeModule,
ButtonModule,
RippleModule,
ChipModule,
@ -25,8 +23,7 @@ import { TooltipModule } from 'primeng/tooltip';
InputTextModule,
PasswordModule,
TooltipModule,
PrimeBlocksRoutingModule,
AppCodeModule
PrimeBlocksRoutingModule
],
declarations: [BlocksComponent, BlockViewerComponent]
})

24
src/app/demo/components/utilities/icons/icons.component.html
View File

@ -1,18 +1,14 @@
<div class="card">
<h2>Icons</h2>
<h4>Download</h4>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
npm install primeicons --save
</app-code>
<pre class="app-code"><code>npm install primeicons --save</code></pre>
<h4>Getting Started</h4>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</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>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</app-code>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="margin-right: .5rem"></i>
<i class="pi pi-times"></i>
@ -20,24 +16,18 @@ npm install primeicons --save
<h4>Size</h4>
<p>Size of the icons can easily be changed using font-size property.</p>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</app-code>
<pre class="app-code"><code>&lt;i class="pi pi-check"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check"></i>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
</app-code>
<pre class="app-code"><code>&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-check" style="font-size: 2rem"></i>
<h4>Spinning Animation</h4>
<p>Special pi-spin class applies infinite rotate to an icon.</p>
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
</app-code>
<pre class="app-code"><code>&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;</code></pre>
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>

4
src/app/demo/components/utilities/utilities.module.ts
View File

@ -2,15 +2,13 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IconsComponent } from './icons/icons.component';
import { UtilitiesRoutingModule } from './utilities-routing.module';
import { AppCodeModule } from '../code/code.component';
import { InputTextModule } from 'primeng/inputtext';
@NgModule({
imports: [
CommonModule,
UtilitiesRoutingModule,
AppCodeModule,
InputTextModule,
InputTextModule
],
declarations: [IconsComponent]
})

15
src/assets/demo/styles/code.scss Normal file
View File

@ -0,0 +1,15 @@
pre.app-code {
background-color: var(--surface-ground);
margin: 0 0 1rem 0;
padding: 0;
border-radius: var(--border-radius);
overflow: auto;
code {
color: var(--surface-900);
padding: 1rem;
line-height: 1.5;
display: block;
font-family: monaco, Consolas, monospace;
}
}

3
src/styles.scss
View File

@ -10,4 +10,5 @@ $gutter: 1rem; //for primeflex grid system
/* Demos */
@import "assets/demo/styles/flags/flags.css";
@import "assets/demo/styles/badges.scss";
@import "assets/demo/styles/badges.scss";
@import "assets/demo/styles/code.scss";