css - PrimeNG p-menubar 将一个元素右对齐

Question

我正在使用 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(),
              }
            ]
          }
        ]

Answer 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%;
}

组件.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'}
  ];