我有以下 Accordion 组:
<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 样式变量,它可以在每个 Accordion 选项卡创建时更改。例如。假设使用 myClass = 'myClass':
:host ::ng-deep .myClass.p-accordion {
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
background: red;
}
}
无论如何,我无法创建 CSS 规则来实现这个目标。 有人可以帮忙吗? 非常感谢提前
最佳答案
解决方案是使用每个折叠选项卡的包装 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
}
关于css - PrimeNG Accordion : Programmatically change header and content styles,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64665152/