PrimeNG p-menubar 将一项向右对齐答案

【问题标题】：PrimeNG p-menubar align one item to rightPrimeNG p-menubar 将一项向右对齐
【发布时间】：2020-04-03 11:43:09
【问题描述】：

我正在使用 PrimeNG 8.1.1，我想将其中一项推送到右侧（注销和配置文件的子菜单）。

有什么建议吗？

    this._menuItems = [
          {
            label: 'Dashboard',
            routerLink: '/dashboard'
          },
          {
            icon:'pi pi-fw pi-user',
            items: [
              {
                label: 'Profile',
                icon: 'pi pi-fw pi-user',
                command:()=> this.profile(),
              },
              {
                label: 'Logout',
                icon: 'pi pi-fw pi-sign-out',
                command:()=> this.logout(),
              }
            ]
          }
        ]

【问题讨论】：

标签： css angular primeng

【解决方案1】：

完全披露：我是新手，所以这可能不是最好的解决方案。在primeng 11.4.2上测试

菜单栏是一个 flex 容器，因此我们应该能够使用标准的 flex 理念来推动项目 - 请参阅 Aligning flex items on MDN。与这里的其他答案一样，我们利用菜单项的style 属性来控制它的显示方式，在这种情况下，我们需要使用margin-left: auto 将项目推到右侧。

我遇到的问题是 p-menubarsub 组件没有占据 100% 的可用宽度，所以单独使用 margin-left 没有任何效果，因为没有空间可以移动项目。

一旦解决这个问题，它似乎对我有用。

组件.css

:host ::ng-deep p-menubarsub {
    width: 100%;
}

component.html

<p-menubar [model]="mainMenu">
    <ng-template pTemplate="start">
        <h4>Welcome</h4>
    </ng-template>
</p-menubar>

组件.ts

export class .... {
  mainMenu: MenuItem[] = [
    {label: 'Left menu item'},
    {label: 'Right menu item', style: {'margin-left': 'auto'}
  ];

【讨论】：

【解决方案2】：

如果我们从 prime 检查编译的代码，我们可以看到“icon”实际上只是表示类。这意味着我们可以在不影响图标的情况下为图标添加自定义类。

this._menuItems = [
      {
        label: 'Dashboard',
        routerLink: '/dashboard'
      },
      {
        icon:'pi pi-fw pi-user',
        items: [
          {
            label: 'Profile',
            icon: 'my-margin-left pi pi-fw pi-user',
            command:()=> this.profile(),
          },
          {
            label: 'Logout',
            icon: 'my-margin-left pi pi-fw pi-sign-out',
            command:()=> this.logout(),
          }
        ]
      }
  ]

现在我们可以在 Styles.css 中简单地添加

.layout-wrapper .layout-menu li a > .my-margin-left {
    margin-left: 25px;
}

这将为该类的菜单中的所有项目添加 css。此解决方案适用于菜单项和子菜单项。

【讨论】：

我尝试了您的确切示例，但它不起作用。我不确定我错过了什么。 :(
嗨，Travis，您使用的是同一个版本的 Prime 吗？我上面发布的解决方案可能不再对素数 9 或 10 有效。

【解决方案3】：

对于 PrimeNG 11.2.0 版本，您有两种选择。

(1) 使用 styleClass 属性：

this._menuItems = [
      {
        label: 'Dashboard',
        routerLink: '/dashboard'
      },
      {
        icon:'pi pi-fw pi-user',
        items: [
          {
            label: 'Profile',
            icon: 'my-margin-left pi pi-fw pi-user',
            command:()=> this.profile(),
          },
          {
            label: 'Logout',
            styleClass: 'p-ml-6',
            icon: 'my-margin-left pi pi-fw pi-sign-out',
            command:()=> this.logout(),
          }
        ]
      }
  ]

(2) 或在 HTML 上使用 ng-template pTemplate="end"：

<p-menubar [model]="items">
    <ng-template pTemplate="end">
        <button type="button" pButton label="Logout" icon="pi pi-sign-out"></button>
    </ng-template>
</p-menubar>

【讨论】：