PrimeNg (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (20 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 6: | Zeile 6: | ||
npm install primeng --save | npm install primeng --save | ||
npm install primeicons --save | npm install primeicons --save | ||
npm install font-awesome --save | |||
</pre> | </pre> | ||
''fa-fw'': Fixed Width | |||
=== angular.json === | === angular.json === | ||
| Zeile 16: | Zeile 19: | ||
"src/styles.css", | "src/styles.css", | ||
"node_modules/primeicons/primeicons.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/themes/omega/theme.css", | ||
"node_modules/primeng/resources/primeng.min.css" | "node_modules/primeng/resources/primeng.min.css" | ||
| Zeile 35: | Zeile 39: | ||
], | ], | ||
</pre> | </pre> | ||
== Table == | |||
[[Table (PrimeNg)|Table]] | |||
== TreeTable == | == TreeTable == | ||
== | [[TreeTable (PrimeNg)|TreeTable]] | ||
== Panel == | |||
<pre> | <pre> | ||
import { | import { PanelModule } from 'primeng/panel'; | ||
</pre> | </pre> | ||
| Zeile 50: | Zeile 57: | ||
imports: [ | imports: [ | ||
... | ... | ||
PanelModule | |||
... | ... | ||
], | ], | ||
</pre> | </pre> | ||
== | == Links == | ||
=== Tutorial === | |||
[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 === | ||
[https://github.com/primefaces/primeng https://github.com/primefaces/primeng] | [https://github.com/primefaces/primeng https://github.com/primefaces/primeng] | ||
=== Icons === | |||
==== Font Awesome ==== | |||
[https://fontawesome.com/v4.7.0/icons/ https://fontawesome.com/v4.7.0/icons/] | |||
[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
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