[StyleClass] Применга с условным стилем - PullRequest
Новая
       4

[StyleClass] Применга с условным стилем

1 голос
/ 24 января 2020

Я бы хотел поместить условный стиль в элемент primeng 'p-overlayPanel'. Я пробовал:

  1. <p-overlayPanel [styleClass]="#{(bean.comment) ? 'style1' : 'style2'}">, но он не работает.
  2. [ng-class]="bean.comment ? 'style1' : 'style2'" - это тоже не работает.

Стиль стилей работает только без условия, например:

  • <p-overlayPanel [styleClass]="style1"> // html file

  • p-overlayPanel .style1.ui-overlay { background-color: yellow; } // css file

Хотя [ng-class] вообще не работает (но отлично работает на элементах vanilla JS). Я что-то пропустил? Мои вопросы следующие:

  1. Не работает ли 'ng-class' для некоторых элементов из коллекции ngPrime?
  2. Как правильно условно применить 'styleClass' для элемента p-overlayPanel? Я использую Angular 8.

1 Ответ

0 голосов
/ 27 января 2020

styleClass принимает строку как css класс или список классов и применяется к элементу, у которого уже есть список этих классов overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow

, так что если вы хотите чтобы изменить цвет фона, вы должны сделать это следующим образом 

.style1.ui-overlaypanel{
  background-color: red;
}

.style2.ui-overlaypanel{
  background-color: green;
}

вам нужно добавить класс в глобальный файл стиля, а не в файл стиля компонента, и если вы используете свойство style, значение будет перейти к директиве ngStyle.

демо ?

? overlaypanel.ts

Обновлено 10

вы можете использовать ngClass, но стиль должен быть изменен, как в примере ниже, потому что теперь классы css будут применяться непосредственно к элементу. 

.style1 .ui-overlaypanel{
  background-color: red;
}

.style2 .ui-overlaypanel{
  background-color: green;
}

demo ?

...