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

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>

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

Answer 1

这应该有帮助

<p-menubar [model]="items">
  <ng-template pTemplate="start">
    <img src="/assets/images/logo.png" height="40" class="p-mr-2" alt="brand logo">
  </ng-template>
  <ng-template pTemplate="end">
    <label>
      <input type="text" pInputText placeholder="Szukaj">
    </label>
    <button type="button" (click)="logout()" pButton label="Wyloguj" icon="pi pi-power-off" style="margin-left:.25em"></button>
  </ng-template>
</p-menubar>

Answer 2

您可以做的是添加自定义内容：

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

插入您的徽标图像：

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

然后，使用几行 CSS，将 a 添加padding-left到菜单项并将徽标放置在左侧：

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

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

演示