在 Angular 中单击 Mat-Expansion-Panel 标题时更改其背景颜色

问题描述 投票:0回答:1

下面是我在 Angular 15 和 Angular Material 14 中使用的代码

<mat-nav-list role="list">
<a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" *ngIf="isSysAdmin"
    (click)="sideNavLink(true, $event)" matTooltip="Notification Templates" matTooltipPosition="right"
    [matTooltipDisabled]="!isCompressed" [routerLink]="['/email-notification-templates']" routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}" class="admin-link">
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">Email Templates</span>
  </a>
  <a >
  <mat-accordion *ngIf="isAdmin && !isCSR">
    <mat-expansion-panel hideToggle [(expanded)]="panelOpenState" class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title style="text-align: left;" (click)="clickNotificationMgmt($event)">
          <img src="../../../../assets/images/icon_bell.svg" alt="Notification Management">
          <span class="add-padding-to-mat-panel-header"><a class="list-item-setting add-padding"
              [routerLink]="['/notification-list']" routerLinkActive="active">Notification Management</a></span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div>
        <mat-panel-description (click)="clickNotificationList($event)" [ngClass]="isNotificationListClicked ? 'bold' : ''"
          id="notificationListId" (click)="sideNavLink(true, $event)" class="mat-panel-description-setting"><a
            class="list-item-setting add-padding" [routerLink]="['/notification-list']"
            routerLinkActive="active">Notification List
          </a></mat-panel-description>
          </div>
    </mat-expansion-panel>
  </mat-accordion>
  </a>
</mat-nav-list>

以下是

Email Templates

的截图

这里

Notification Management
是一个垫子扩展面板 - 手风琴控件。

如何以与

Email Templates
相同的方式显示
Notification Managment
,我的意思是单击它时具有相同的背景颜色,如果用户导航离开它,那么它应该返回正常状态而不突出显示。

编辑

现在整个 Accordion 控件正在更改背景颜色。我只需要它来获取

Notification Management
标题。我们怎样才能实现这个目标..?

任何帮助将不胜感激。

css angular sass angular-material
1个回答
1
投票

您已经在使用

expanded
属性来设置
panelOpenState
。那么,如何在 ngClass 中使用
panelOpenState
呢? 类似的东西:

<mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}">

然后只需在 css 中设置 active-panel 类即可:

.active-panel {
  background-color: /* your desired color */;
}
© www.soinside.com 2019 - 2024. All rights reserved.