问题描述
我有以下手风琴小组:
<p-accordion multiple=true>
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab.myClass}}" header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</p-accordion>
通常按制表符大小动态填充。目标是具有不同的背景和其他样式,具体取决于标签的内容。因此,我具有myClass样式变量,该变量可以在每次创建手风琴标签时更改。例如。假设使用myClass ='myClass':
:host ::ng-deep .myClass.p-accordion {
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
background: red;
}
}
无论如何,我无法创建CSS规则来实现此目标。 有人可以协助吗? 提前非常感谢
解决方法
为了为每个选项卡创建不同的样式,您需要使其依赖于选项卡。现在,您为每个设置相同的样式。方法是创建一个提供类名称的管道。
<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"
,
解决方案是使用每个手风琴标签的包装器div:
<p-accordion multiple=true>
<div *ngFor="let tab of tabs" class="{{tab.customClass}}">
<p-accordionTab header="{{tab.header}}"
[selected]="false">
{{tab.description}}
</p-accordionTab>
</div>
</p-accordion>
其中:
.customClass * {
background: red !important;
//other properties
}