PrimeNg (Angular): Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 40: Zeile 40:
</pre>
</pre>


== TreeTable ==
== Table ==


=== app.module.ts ===
[[Table (PrimeNg)|Table]]


<pre>
== TreeTable ==
import { AccordionModule } from 'primeng/accordion';
import { TreeTableModule } from 'primeng/treetable';
</pre>
 
<pre>
imports: [
  ...
  TreeTableModule,
  AccordionModule,
  ...
],
</pre>
 
==== 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ü ====
[[TreeTable (PrimeNg)|TreeTable]]
 
<pre>
import { ContextMenuModule } from 'primeng/contextmenu';
</pre>
 
<pre>
imports: [
  ...
  ContextMenuModule
  ...
],
</pre>


== Panel ==
== Panel ==
Zeile 120: Zeile 67:


[https://www.primefaces.org/primeng/ https://www.primefaces.org/primeng/]
[https://www.primefaces.org/primeng/ https://www.primefaces.org/primeng/]
==== Grid ====
[https://www.primefaces.org/showcase/ui/panel/grid.xhtml https://www.primefaces.org/showcase/ui/panel/grid.xhtml]
[https://github.com/primefaces/primeng/blob/master/src/app/components/grid/grid.css https://github.com/primefaces/primeng/blob/master/src/app/components/grid/grid.css]


=== Demos ===
=== Demos ===

Aktuelle Version vom 19. August 2018, 14:35 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

Abgerufen von „https://tutorials.kirner.or.at/tutorials/index.php?title=PrimeNg_(Angular)&oldid=5289“