PrimeNg (Angular): Unterschied zwischen den Versionen

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


[[TreeTable (PrimeNg)|TreeTable]]
[[TreeTable (PrimeNg)|TreeTable]]
==== Inline Editing ====
<pre>
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
</pre>
<pre>
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],
</pre>
==== Pagination ====
<pre>
import { PaginatorModule } from 'primeng/paginator';
</pre>
<pre>
imports: [
  ...
  PaginatorModule,
  ...
],
</pre>
==== Context Menü ====
<pre>
import { ContextMenuModule } from 'primeng/contextmenu';
</pre>
<pre>
imports: [
  ...
  ContextMenuModule
  ...
],
</pre>


== Panel ==
== Panel ==

Version vom 19. August 2018, 14:10 Uhr

General

Installation

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

fa-fw: Fixed Width

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