How to add app-logo-image to primeng menubar?

问题

I followed https://www.primefaces.org/primeng/#/menubar which is good to display menu-items that can be passed as a list. My requirement is to add App related logo image to the top-left corner. Plz can someone advise how to make this work.

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

and my html looks as below

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

As am just passing items as an array, may I know how to display app-logo-image.

回答1:

What you can do is to add Custom Content :

Custom content can be placed between p-menubar tags.

Insert your logo image :

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

Then, with a few lines of CSS, add a padding-left to the menu items and position your logo to the left :

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

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

Demo

回答2:

This worked for me. I used @Antikhippe's solution but changed scss little bit and it worked.

::ng-deep.ui-menubar .ui-menubar-root-list{
    padding-left: 13em !important;
    }
    img#logo {
      position:absolute;
      left:0;
    }

回答3:

Depending on the situation, one may need to add some space in the left. Also, in order to fit the image within the confines of the menubar, you need to provide height and width settings.

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

img#logo {
  position: absolute;
  left: 10px;
  height: 33px;
  width: 129px;;
}

来源：https://stackoverflow.com/questions/46627436/how-to-add-app-logo-image-to-primeng-menubar

标签

angular

primeng