Wie man app-logo-image zu primeng menubar hinzufügt?

Ich folgte https://www.primefaces.org/primeng/#/menubar was gut ist, Menü-Elemente anzuzeigen, die als Liste übergeben werden können. Meine Anforderung besteht darin, der linken oberen Ecke ein App-bezogenes Logo hinzuzufügen. Plz kann jemand beraten, wie dies funktioniert.Wie man app-logo-image zu primeng menubar hinzufügt?

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

und meine html sieht wie unten

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

Als ich vorbei nur Elemente als Array kann ich wissen, wie app-Logo-Bild anzuzeigen.

2017-10-08 nsk

so, Sie wollen ein Bild zu die linke der Menüleiste, die nicht mit einem Menüelement verknüpft ist? – BillF

Ja PLZ, wie Logo für die gesamte App ist, möchte ich es auf App-Ebene – nsk

Was können Sie tun, ist Custom Content hinzuzufügen:

Benutzerdefinierte Inhalte können zwischen p-menubar-Tags platziert werden.

Fügen Sie Ihr Logo-Bild:

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

Dann mit ein paar Zeilen CSS, eine padding-left zu den Menüpunkten hinzufügen und Ihr Logo auf die linke Position:

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

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

2017-11-16 08:15:34 Antikhippe

Antwort