2017-10-08 4 views
2

J'ai suivi https://www.primefaces.org/primeng/#/menubar ce qui est bon pour afficher les éléments de menu qui peuvent être passés en liste. Mon exigence est d'ajouter l'image du logo lié à l'application dans le coin supérieur gauche. Plz quelqu'un peut-il conseiller comment faire ce travail.Comment ajouter app-logo-image à primar menubar?

ngOnInit() { 
     this.items = [ 
      {label: 'Chart', icon: 'fa-bar-chart', routerLink: 'charts'}, 

et mon html regarde comme ci-dessous

<p-menubar [model]="items"></p-menubar> 

mod que passer des éléments comme un tableau, puis-je savoir comment afficher app-logo-image.

+0

Ainsi, vous voulez une image à la gauche de la barre de menus qui n'est pas associée à un élément de menu? – BillF

+0

Oui plz, comme le logo est pour l'application entière, je le veux au niveau de l'application – nsk

Répondre

0

Ce que vous pouvez faire est d'ajouter Custom Content:

contenu personnalisé peut être placé entre les balises p-menubar.


Insérez votre image logo:

<p-menubar [model]="items"> 
    <img id="logo" src="https://www.primefaces.org/wp-content/uploads/fbrfg/favicon-32x32.png"/>   
</p-menubar> 

Puis, avec quelques lignes de CSS, ajoutez un padding-left aux éléments de menu et placez votre logo à gauche:

.ui-menubar-root-list { 
    padding-left:32px; 
} 

img#logo { 
    position:absolute; 
    left:0; 
} 

Demo