css – 如何在PrimeNG中更改MenuItem中的样式

2023年12月28日 373次阅读

我想在这里使用PrimeNG来改变MenuItem的颜色.

到目前为止,这是我的代码：

<p-menu [style]="{'width': '400px'}" #menuOpcoesLista popup="popup" [model]="opcoesListaCS" appendTo="body"></p-menu>

这是我从菜单中创建itens的功能：

     this.opcoesListaCS = [
        {label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];

根据PrimeNG文档,我尝试添加样式标记,但它不起作用.尝试了所有格式和种类,尝试过类.但不适合我.

有谁知道如何改变颜色？我希望第一个是绿色,第二个是黄色,第三个是红色.

最佳答案 你需要添加styleClass =“menucus”

《css – 如何在PrimeNG中更改MenuItem中的样式》

模板代码：

<h3>Popup</h3>
<p-menu #menu popup="popup" styleClass="menucus" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>

组件代码：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
   items: MenuItem[];

    ngOnInit() {
        this.items = [{label: 'Approve', command: (event) => { this.approve() }},
        {label: 'Send email', command: (event) => { this.sendMail() }},
        {label: 'Details', command: (event) => { this.details() }}];
    }
    approve() {

    }
    sendMail() {

    }
    details() {

    }
}

CSS代码：

/deep/ .menucus ul li:nth-child(1) {
    background: green;
}
/deep/ .menucus ul li:nth-child(2) {
    background: yellow;
}
/deep/ .menucus ul li:nth-child(3) {
    background: red;
}
点赞