我正在使用 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(),
}
]
}
]
最佳答案
完全披露:我是新手,所以这可能不是最好的解决方案。 在 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'}
];
关于css - PrimeNG p-menubar 将一个元素右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59264663/