primeng 메뉴 바에 app-logo-image를 추가하는 방법은 무엇입니까?

Question

다음은 목록으로 전달할 수있는 메뉴 항목을 표시하는 데 좋은 https://www.primefaces.org/primeng/#/menubar입니다. 내 요구 사항은 왼쪽 상단 모서리에 앱 관련 로고 이미지를 추가하는 것입니다. Plz 누군가가이 작품을 만드는 방법을 조언 할 수 있습니다.

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

내 HTML을

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

로 아래로 보이는 그냥 배열로 항목을 통과하고 내가 앱 로고 이미지를 표시하는 방법을 알 수 있습니다.

Answer 1

은 당신이 할 수있는 것은 Custom Content을 추가하는 것입니다

사용자 지정 내용이 P-메뉴 바의 태그 사이에 배치 할 수 있습니다. CSS의 몇 줄, 메뉴 항목에 padding-left을 추가하고 왼쪽에 로고를 배치, 그리고

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

:

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

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

---

로고 이미지를 삽입

Demo