Je souhaite afficher les boutons Ajouter et Supprimer dans l'en-tête du panneau. Le code ci-dessous affiche un bouton sans icône de fa et sans étiquette
<p-panel>
<p-header>
<div>
Registration Form
<button type="button" pButton icon="fa-plus" style="float:right" label="Add">
</button>
</div>
</p-header>
</p-panel>
Après avoir importé le BrowserAnimationsModule, les boutons primitifs s’affichent à l’intérieur du panneau.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
Votre code fonctionne bien ici .
Avez-vous importé font-awesome
dans votre application? Sinon, ajoutez ceci dans votre index.html
dans la balise <head></head>
.
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
De plus, vous devrez importer ButtonModule, PanelModule
dans votre application.
import {ButtonModule, PanelModule} from 'primeng';
@NgModule({
imports: [
...
ButtonModule,
PanelModule,
...
],
...
})
si vous travaillez avec angular2/4, vous devez ajouter l’importation suivante à votre app.module.ts.
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
Vous avez des erreurs de structure dans votre exemple de code. J'ai créé un plnkr pour vous.
http://plnkr.co/edit/myrBq9tv4iNRNd6v6bhT?p=preview
<p-panel>
<p-header>
<div>Registration Form
<button type="button" pButton icon="fa-plus" style="float:right" label="Add"></button>
<button type="button" class="ui-button-danger" pButton icon="fa-minus" style="float:right" label="Delete"></button>
</div>
</p-header>
</p-panel>
Changer de pi-proche en fa-proche a fonctionné pour moi.
On dirait qu'il y a de nouvelles et d'anciennes icônes géniales de polices. Ils doivent être utilisés comme ceci:
class="pi pi-xxx" or class="fa fa-xxx"