根据是否扩展垫扩展面板标题动态更改背景颜色 [英] Dynamically change background color of mat-expansion-panel-header based on whether or not it is expanded

问题描述

我一直在努力寻找一种根据面板是否扩展来动态更改材质设计扩展面板标题的背景颜色的方法.

I've been struggling to find a way to dynamically change the background color of a material design expansion panel header based on whether or not the panel is expanded.

当面板关闭时，我希望背景颜色为白色，但是在展开时，我想将该颜色更改为其他颜色.我没有看到可以基于此更改的内容，也许我缺少了一些内容.我刚开始接触角度，并以为我只能以[expanded]的设置为基础，但事实并非如此.

When the panel is closed I'd like the background color to be white, but when it is expanded I want to change that color to something else. I'm not seeing something I can base this change off of, maybe I'm missing something. I'm new to angular and was thinking I would just be able to base it off of [expanded]'s setting but it appears that is not the case.

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> &nbsp; {{cat}}
  </mat-expansion-panel-header>
  <ng-template matExpansionPanelContent>

    some content

  </ng-template>
</mat-expansion-panel>
</mat-accordion>

推荐答案

Angular Material确实基于expanding状态添加了动态类.

Angular Material does add dynamic classes based on the expanding state.

mat-expanded将是您要寻找的那个.问题是此类也被附加到面板内容上.为了解决这个问题，您可以将其与.mat-expansion-panel-header类选择器简单组合.

mat-expanded would be the one you are looking for. The problem is this class gets also attached to the panel-content. In order to fix this, you can simply combine it with the .mat-expansion-panel-header class selector.

所有总结如下:

.mat-expansion-panel-header.mat-expanded {
  background: red;
}

注意:Angular Material还会在悬停状态上添加background: inherit.

如果这不是您想要的行为，只需将其覆盖如下:

If that's not the behavior you want, simply overwrite it like this:

.mat-expansion-panel-header.mat-expanded,
.mat-expansion-panel-header.mat-expanded:hover {
  background: red;
}

这篇关于根据是否扩展垫扩展面板标题动态更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！