PrimeNG p-menubar 将一项向右对齐

Posted 2023-03-06

【中文标题】PrimeNG p-menubar 将一项向右对齐

【英文标题】：PrimeNG p-menubar align one item to right

【发布时间】：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(),
              
            ]
          
        ]

【参考方案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>