如何在 Ng Prime 菜单栏中设置菜单项的样式？

Question

我刚刚开始使用 ng prime，我使用了 p 菜单

<p-menubar [model]="items"></p-menubar>

这是组件文件：

  this.items = [
      {
          label: 'First item',
      },
      {
          label: 'Second item'
      },
      {
        label: 'third item',
      },
      {
          icon: 'pi pi-fw pi-power-off'
      }
  ];

一切工作正常，但我的问题是通过 component.ts 文件动态添加时如何设置菜单栏项目的样式，因为我想将第三个和最后一个项目推到菜单栏右侧的末尾以及第一个和第二个项目开始时向左？

Answer 1

我让它工作了，但是右边的项目需要颠倒，为了保留顺序，这是由于

float: right

颠倒了元素的顺序。

基本上删除了

flex

容器并使用向右/向左浮动来定位元素！

样式.scss

p-menubarsub {
  width: 100% !important;
  .p-menubar-root-list {
    display: block !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    & > li:nth-child(1) {
      float: left !important;
    }
    & > li:nth-child(2) {
      float: left !important;
    }
    & > li:nth-child(3) {
      float: right !important;
    }
    & > li:nth-child(4) {
      float: right !important;
    }
  }
}

html

<div class="card">
    <p-menubar [model]="items"></p-menubar>
</div>

ts

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'menubar-basic-demo',
  templateUrl: './menubar-basic-demo.html',
})
export class MenubarBasicDemo implements OnInit {
  items: MenuItem[] | undefined;

  ngOnInit() {
    this.items = [
      {
        label: 'First item',
      },
      {
        label: 'Second item',
      },
      {
        icon: 'pi pi-fw pi-power-off',
      },
      {
        label: 'third item',
      },
    ];
  }
}

堆栈闪电战