Question

我跟着https://www.primefaces.org/primeng/#/menubar，这样可以显示可以作为列表传递的菜单项。我的要求是在左上角添加App相关的徽标图像。 Plz可以有人建议如何使这项工作。

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

我的html如下所示

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

由于我只是将项目作为数组传递，我是否知道如何显示app-logo-image。

Answer 1

这应该有帮助

(1,5,73,144,17)

Answer 2

您可以做的是添加Custom Content：

可以在p-menubar标签之间放置自定义内容。

插入徽标图片：

<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

Answer 3

这对我有用。我使用了@Antikhippe的解决方案，但对scss进行了一些更改，并且可以正常工作。

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

Answer 4

根据情况，可能需要在左侧添加一些空间。另外，为了使图像适合菜单栏的范围，您需要提供高度和宽度设置。

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

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

Answer 5

另一种方法：

<div class="layout-topbar">
    <a class="logo" href="#/">
        <img class="ng-tns-c1-0" alt="logo" src="https://www.primefaces.org/primeng/showcase/assets/showcase/images/primeng-logo-dark.svg">
    </a>
    <p-tabMenu [model]="items"></p-tabMenu> 
    <!-- it works for a p-menubar -->
    <!-- <p-menubar [model]="items"></p-menubar> -->
</div>

如何将app-logo-image添加到primeng菜单栏？

5 个答案: