New code display
This commit is contained in:
@@ -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-{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>
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i></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>
|
||||
<i class="pi pi-check"></i>
|
||||
</app-code>
|
||||
|
||||
<pre class="app-code"><code><i class="pi pi-check"></i></code></pre>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<app-code lang="markup" ngPreserveWhitespaces ngNonBindable>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
<pre class="app-code"><code><i class="pi pi-check" style="font-size: 2rem"></i></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>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
</app-code>
|
||||
<pre class="app-code"><code><i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i></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]
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user