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

问题描述

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

当面板关闭时，我希望背景颜色为白色，但是当它展开时，我想将该颜色更改为其他颜色.我没有看到我可以根据此更改进行更改的内容，也许我遗漏了一些内容.我是 angular 的新手，我想我只能根据 [expanded] 的设置来确定它，但事实并非如此.

mat-accordion垫子扩展板垫扩展面板标题垫扩展{字体大小:1.25em；背景颜色:白色；背景:白色；颜色:#00838f；字体粗细:500；}垫手风琴垫子扩展板垫扩展面板标题{字体大小:1.25em；背景颜色:白色；背景:白色；颜色:#00838f；字体粗细:500；}垫手风琴垫子扩展板.mat-expansion-panel-body {背景颜色:白色；填充顶部:5px；}.mat-expansion-indicator::after {颜色:#00838f；}

<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;{{猫}}</mat-expansion-panel-header><ng-template matExpansionPanelContent>一些内容</ng-模板></mat-expansion-panel></mat-accordion>

解决方案

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

mat-expanded 将是您正在寻找的那个.问题是这个类也被附加到面板内容上.为了解决这个问题，你可以简单地将它与 .mat-expansion-panel-header 类选择器结合起来.

总结起来应该是这样的:

.mat-expansion-panel-header.mat-expanded {背景:红色；}

<块引用>

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

如果这不是您想要的行为，只需像这样覆盖它:

.mat-expansion-panel-header.mat-expanded,.mat-expansion-panel-header.mat-expanded:hover {背景:红色；}

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.

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 does add dynamic classes based on the expanding state.

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.

All summed up this would look like this:

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

Notice: Angular Material does also add background: inherit on the hover state.

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;
}

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