PrimeNG 手风琴：以编程方式更改 header 和内容样式

Question

我有以下手风琴组：

<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 规则来实现此目标。有人可以帮忙吗？非常感谢

Answer 1

为了为每个选项卡创建不同的样式，您需要使其依赖于选项卡。现在你为每个设置相同的样式。一种方法是创建一个提供 class 名称的管道。

<p-accordionTab *ngFor="let tab of tabs" styleClass="{{tab | getTabClass}}" header="{{tab.header}}"

Answer 2

解决方案是使用每个手风琴选项卡的包装器 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
}

PrimeNG 手风琴：以编程方式更改 header 和内容样式

PrimeNG Accordion: Programmatically change header and content styles

css

accordion

primeng

angular