如何添加app-logo-image到primeng菜單欄？

Question

我跟着https://www.primefaces.org/primeng/#/menubar這是很好的顯示菜單項，可以作爲一個列表傳遞。我的要求是將應用程序相關的徽標圖像添加到左上角。有人可能會建議如何做這項工作。

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

和我的HTML看起來如下

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

正如我剛纔路過的項目作爲一個數組，可我知道如何顯示應用，標誌形象。

Answer 1

你可以做的是添加Custom Content：

自定義內容可以放在對菜單欄標記之間。

---

插入您的標誌圖像：

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

然後，用CSS的幾行，添加一個padding-left的菜單項和您的標誌位置向左：

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

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

Demo