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

如果我们检查素数的编译代码，我们可以看到“ 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。此解决方案适用于菜单和子菜单项。

Answer 2

对于 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>

Answer 3

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

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

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

一旦修复，它似乎对我有用。

component.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>

component.ts

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

PrimeNG p菜单将一项右对齐

3 个答案: