PrimeNg (Angular): Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| (24 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 === | |||
Hier wird ''omega/theme.css'' verwendet, es gibt jedoch verschiedene verfügbare Themes: | |||
<pre> | |||
"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" | |||
], | |||
</pre> | |||
=== app.module.ts === | |||
<pre> | |||
import { BrowserModule } from '@angular/platform-browser'; | |||
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; | |||
</pre> | |||
<pre> | |||
imports: [ | |||
BrowserModule, | |||
BrowserAnimationsModule, | |||
... | |||
], | |||
</pre> | |||
== Table == | |||
[[Table (PrimeNg)|Table]] | |||
== TreeTable == | |||
[[TreeTable (PrimeNg)|TreeTable]] | |||
== Panel == | |||
<pre> | |||
import { PanelModule } from 'primeng/panel'; | |||
</pre> | |||
<pre> | |||
imports: [ | |||
... | |||
PanelModule | |||
... | |||
], | |||
</pre> | |||
== Links == | == 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