New code display

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
@@ -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>
@@ -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]
})