我一直在努力寻找一种方法来根据面板是否展开来动态更改 Material Design 展开面板标题的背景颜色。
当面板关闭时,我希望背景颜色为白色,但当它展开时,我想将该颜色更改为其他颜色。我没有看到可以根据此更改进行更改的内容,也许我遗漏了一些内容。我是 Angular 的新手,我想我可以将它基于 [expanded] 的设置,但事实并非如此。
mat-accordion
mat-expansion-panel
mat-expansion-panel-header
mat-expanded{
font-size: 1.25em;
background-color: white;
background: white;
color: #00838f;
font-weight: 500;
}
mat-accordion
mat-expansion-panel
mat-expansion-panel-header {
font-size: 1.25em;
background-color: white;
background: white;
color: #00838f;
font-weight: 500;
}
mat-accordion
mat-expansion-panel
.mat-expansion-panel-body {
background-color: white;
padding-top: 5px;
}
.mat-expansion-indicator::after {
color: #00838f;
}
<mat-accordion multi="true">
<mat-expansion-panel [expanded]="selectedBenefitCategories.indexOf(cat)!=-1" [hidden]="selectedBenefitCategories.indexOf(cat)===-1">
<mat-expansion-panel-header>
<i class="search-category-icon far fa-star"></i> {{cat}}
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
some content
</ng-template>
</mat-expansion-panel>
</mat-accordion>
最佳答案
Angular Material 确实添加了基于expanding
状态的动态类。
mat-expanded
将是您正在寻找的那个。问题是此类也附加到面板内容。为了解决这个问题,您只需将它与 .mat-expansion-panel-header
类选择器组合即可。
总结起来应该是这样的:
.mat-expansion-panel-header.mat-expanded {
background: red;
}
Notice: Angular Material does also add
background: inherit
on the hover state.
如果这不是您想要的行为,只需像这样覆盖它:
.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
background: red;
}
关于html - 根据是否扩展动态更改 mat-expansion-panel-header 的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50515461/