Вопрос:
Я пытаюсь изменить цвет MenuItem, используя PrimeNG здесь. Вот мой код:
<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, но он просто не работает. Пробовал все форматы и виды, попробовал и класс. Но не работал для меня.
Кто-нибудь знает, как изменить цвет? Я бы хотел, чтобы первый был зеленым, второй – желтым, а третий – красным.
Ответ №1
Вам нужно добавить styleClass=»menucus»
Шаблонный код:
<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; }