PrimeNg (Angular): Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
Zeile 10: Zeile 10:


''fa-fw'': Fixed Width
''fa-fw'': Fixed Width
=== Komponente erstellen ===
<pre>
ng generate component [-s] actor-table
</pre>
{| class="wikitable"
|-
!kurz
!lang
!Bedeutung
|-
| -s
| --inline-style
| Es wird keine CSS-Datei erstellt
|}


=== angular.json ===
=== angular.json ===

Version vom 19. August 2018, 14:23 Uhr

General

Installation

npm install primeng --save
npm install primeicons --save
npm install font-awesome --save

fa-fw: Fixed Width

Komponente erstellen

ng generate component [-s] actor-table
kurz lang Bedeutung
-s --inline-style Es wird keine CSS-Datei erstellt

angular.json

Hier wird omega/theme.css verwendet, es gibt jedoch verschiedene verfügbare Themes:

"styles": [
  "src/styles.css",
  "node_modules/primeicons/primeicons.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "node_modules/primeng/resources/themes/omega/theme.css",
  "node_modules/primeng/resources/primeng.min.css"
],

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [
  BrowserModule,
  BrowserAnimationsModule,
  ...
],

Table

Table

TreeTable

TreeTable

Panel

import { PanelModule } from 'primeng/panel';
imports: [
  ...
  PanelModule
  ...
],

Links

Tutorial

https://www.primefaces.org/primeng/

Grid

https://www.primefaces.org/showcase/ui/panel/grid.xhtml

https://github.com/primefaces/primeng/blob/master/src/app/components/grid/grid.css

Demos

https://github.com/primefaces/primeng

Icons

Font Awesome

https://fontawesome.com/v4.7.0/icons/

https://fontawesome.com/v4.7.0/examples/


Zurück zu JavaScript