PrimeNg (Angular): Unterschied zwischen den Versionen

Aus Tutorials
Zur Navigation springen Zur Suche springen
 
(13 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 8: Zeile 8:
npm install font-awesome --save
npm install font-awesome --save
</pre>
</pre>
''fa-fw'': Fixed Width


=== angular.json ===
=== angular.json ===
Zeile 38: 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>
[[TreeTable (PrimeNg)|TreeTable]]
imports: [
  ...
  TreeTableModule,
  AccordionModule,
  ...
],
</pre>


==== Inline Editing ====
== Panel ==


<pre>
<pre>
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { PanelModule } from 'primeng/panel';
</pre>
</pre>


Zeile 65: Zeile 57:
imports: [
imports: [
   ...
   ...
   FormsModule,
   PanelModule
  ReactiveFormsModule,
   ...
   ...
],
],
</pre>
</pre>


==== Pagination ====
== Links ==
 
<pre>
import { PaginatorModule } from 'primeng/paginator';
</pre>


<pre>
=== Tutorial ===
imports: [
  ...
  PaginatorModule,
  ...
],
</pre>


==== Context Menü ====
[https://www.primefaces.org/primeng/ https://www.primefaces.org/primeng/]


<pre>
==== Grid ====
import { ContextMenuModule } from 'primeng/contextmenu';
</pre>


<pre>
[https://www.primefaces.org/showcase/ui/panel/grid.xhtml https://www.primefaces.org/showcase/ui/panel/grid.xhtml]
imports: [
  ...
  ContextMenuModule
  ...
],
</pre>


== Links ==
[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 ===
Zeile 105: Zeile 78:
[https://github.com/primefaces/primeng https://github.com/primefaces/primeng]
[https://github.com/primefaces/primeng https://github.com/primefaces/primeng]


== Icons ==
=== Icons ===
 
==== Font Awesome ====


=== Font Awesome ===
[https://fontawesome.com/v4.7.0/icons/ https://fontawesome.com/v4.7.0/icons/]


[https://fontawesome.com/icons?d=gallery https://fontawesome.com/icons?d=gallery]
[https://fontawesome.com/v4.7.0/examples/ https://fontawesome.com/v4.7.0/examples/]




Zurück zu [[JavaScript#Tutorials|JavaScript]]
Zurück zu [[JavaScript#Tutorials|JavaScript]]

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