Как изменить стиль в MenuItem от PrimeNG

Вопрос: Я пытаюсь изменить цвет MenuItem, используя PrimeNG здесь. Вот мой код: И вот моя функция для создания itens из меню: this.opcoesListaCS = [ {label: 'Approve', command: (event) => { this.approve() }}, {label: 'Send email', command: (event) => { this.sendMail() }}, {label: 'Details', command: (event) => { this.details()

Вопрос:

Я пытаюсь изменить цвет 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; }

Оцените статью
Добавить комментарий