Question

在这里，当我单击通知或仪表板或注释时，我要使用多个mat-list-item，我想用红色突出显示它如何以角度显示？

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>

Answer 1

由于您已经在使用routerLink，因此应该利用routerLinkActive

html：

<mat-list>
   <mat-list-item style="cursor: pointer" routerLink="/base/dashboard" [routerLinkActive]="['is-active']>Dashboard</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/notification" [routerLinkActive]="['is-active']>Notification</mat-list-item>
   <mat-list-item style="cursor: pointer" routerLink="/base/comments" [routerLinkActive]="['is-active']>Comments</mat-list-item>
</mat-list>

css：

.is-active {
    background-color: red;
}

Answer 2

我这样想

clickedItem: 'dashboard' | 'notification' | 'comments';


onClick(item: 'dashboard' | 'notification' | 'comments') {
  this.clickedItem = item;
}

.red {
  background-color: red;
}

<mat-list>
   <mat-list-item [ngClass]="{red: clickedItem === 'dashboard'}"            (click)="onClick('dashboard')" style="cursor: pointer" routerLink="/base/dashboard">Dashboard</mat-list-item>
   <mat-list-item [ngClass]="{red: clickedItem === 'notification'}"  (click)="onClick('notification')" style="cursor: pointer" routerLink="/base/notification">Notification</mat-list-item>
   <mat-list-item  [ngClass]="{red: clickedItem === 'comments'}" (click)="onClick('comments')" style="cursor: pointer" routerLink="/base/comments">Comments</mat-list-item>
</mat-list>

Answer 3

我们可以通过以下样式更改来实现这一点

.mat-nav-list .mat-list-item:focus,
.mat-action-list .mat-list-item:focus,
.mat-list-option:focus {
  background: #76b900 !important;
}

Answer 4

当列表项导航到某处时，<mat-nav-list>应该与<a mat-list-item>元素一起用作列表项。导航列表将使用role="navigation"呈现，并且可以给定aria-label以提供所显示的导航选项集的上下文。不应在锚点内添加其他交互式内容，例如按钮。

<mat-nav-list>
    <a mat-list-item 
    *ngFor="let report of category.reports">
    <span>{{ report.reportName }}</span>
    </a>
</mat-nav-list>

如果要专门定位和更改颜色，可以使用此选项。对于悬停效果，上面的方法应该可以正常工作

.mat-list-item {
background-color: #fefefe; 
}

如何用角颜色突出显示所选的垫列表项？

4 个答案: