PrimeNG - Components para la Vida Real

PrimeNG
Componentes Para La Vida Real
Çağatay Çivici

Sobre Mí
Fundador de PrimeTek

Más Completo Flexibilidad
Temas y Plantillas Código Abierto

Proyecto
de
Código Abierto
(MIT)

Instalar
npm install primeng --save
npm install primeicons --save
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
//...
],
import {TableModule} from ‘primeng/table';
<p-table [value]="cars">

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"
optionLabel="name"></p-dropdown>
export class MyModel {
cities: City[];
selectedCity: City;
constructor() {
//An array of cities
this.cities = [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Sevilla', code: ‘SVL'}
];
}
}
Dropdown

DataTable
<p-dataTable [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>

Table
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>

Directivas
<ng-template pTemplate="header">
<tr>
<th pSortableColumn>Vin</th>
<th pSortableColumn>Year</th>
<th pSortableColumn>Brand</th>
<th pSortableColumn>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr [pSelectableRow]=“car”>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>

Diálogo
<p-dialog header="Godfather
I" [(visible)]="display" [modal]=“true" [maximizable]="true">
<p>The story begins as Don Vito Corleone, the head of a New York Mafia
family, oversees his daughter's wedding. His beloved son Michael has just come
home from the war, but does not intend to become part of his father's
business. Through Michael's life the nature of the family business becomes
clear. The business of the family is just like the head of the family, kind
and benevolent to those who give respect,but given to ruthless violence
whenever anything stands against the good of the family.</p>
<p-footer>
<button type="button" pButton icon="pi pi-
check" (click)="display=false" label="Yes"></button>
<button type="button" pButton icon="pi pi-
close" (click)="display=false" label="No" class="ui-button-secondary"></
button>
</p-footer>
</p-dialog>

Diálogo Dinámico
show() {
const ref = this.dialogService.open(CarsListDemo, {
header: 'Choose a Car',
width: '70%'
});
ref.onClose.subscribe((car: Car) => {
if (car) {
this.messageService.add({severity:'info', summary: 'Car
Selected', detail:'Vin:' + car.vin});
}
});
}
DialogService

TabView
<p-tabView>
<p-tabPanel header="Header 1">
Content 1
</p-tabPanel>
Content 2
</p-tabPanel>
Content 3
</p-tabPanel>
</p-tabView>
<p-tabView>
<p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index"
[selected]=“i == 0">
{{item.content}}
</p-tabPanel>
</p-tabView>

ContextMenu
<p-contextMenu [model]=“items"></p-contextMenu>
export class ContextMenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
items: [{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
]
}
];
}
}

Toast
<p-toast></p-toast>
import {Component} from '@angular/core';
import {MessageService} from 'primeng/api';
@Component({
templateUrl: './my.component.html'
})
export class MyComponent {
constructor(private messageService: MessageService) {}
addSingle() {
this.messageService.add({severity:'success', summary:'Service Message', detail:'Via
MessageService'});
}
clear() {
this.messageService.clear();
}
}
MessageService

Chart
<p-chart type="pie" [data]="data"></p-chart>
export class PieChartDemo {
data: any;
constructor() {
this.data = {
labels: ['A','B','C'],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
}
}

FileUpload
<p-fileUpload name="demo[]" url="./upload.php" (onUpload)="onUpload($event)"
multiple="multiple" accept="image/*" maxFileSize="1000000">
<ng-template pTemplate="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</ng-template>
</p-fileUpload>
export class FileUploadDemo {
uploadedFiles: any[] = [];
constructor(private messageService: MessageService) {}
onUpload(event) {
for(let file of event.files) {
this.uploadedFiles.push(file);
}
this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
}
}

Librerías de Terceros
Google Maps
FullCalendar
Quill Editor
Charts
Recaptcha

FullCalendar
<p-fullCalendar [events]="events"></p-fullCalendar>
export class MyModel {
events: any[];
ngOnInit() {
this.eventService.getEvents().then(events => {this.events = events;});
}
}
@Injectable()
export class EventService {
constructor(private http: Http) {}
getEvents() {
return this.http.get('showcase/resources/data/calendarevents.json')
.toPromise()
.then(res => <any[]> res.json().data)
.then(data => { return data; });
}
}

PrimeFlex
npm install primeﬂex —save

PrimeIcons
npm install primeicons —save
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>

Apoyo Tecnico
El Foro PRO
Seguimiento de
Incidentes

PrimeNG - Components para la Vida Real

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à PrimeNG - Components para la Vida Real

Similaire à PrimeNG - Components para la Vida Real (20)

Plus de cagataycivici

Plus de cagataycivici (10)

Dernier

Dernier (20)

PrimeNG - Components para la Vida Real