Angular Material - 更改选定的 mat-list-option 的颜色

Posted 2023-02-18

【中文标题】Angular Material - 更改选定的 mat-list-option 的颜色

【英文标题】：Angular Material - Change color of mat-list-option on selected

【发布时间】：2019-04-25 14:36:27

【问题描述】：

如何更改mat-list-option 所选选项的颜色？ 现在我有这样的东西：

当前列表

我想将整个选项或“选择时”卡片的颜色更改为绿色。像这样：

我的代码是这样的：

<mat-selection-list #list>
    <mat-list-option *ngFor="let yuvak of yuvaks">
    yuvak.name
    yuvak.phonenumber
     </mat-list-option>
</mat-selection-list>

【参考方案1】：

您可以使用 mat-list-option 标记中的 aria-selected="true" 属性来定位所选选项， 并为其提供相应的 css 属性。

mat-list-option[aria-selected="true"] 
  background: rgba(0, 139, 139, 0.7);

Stackblitz Working Demo

【讨论】：

我还没有实现，但从演示中我认为这会起作用。但是，我在哪里可以找到属性喜欢 aria-selected 的文档？。

请在网上搜索，因为每当我检查 mat-list-option 并发现该属性被触发时，我都会查找 dom 更改，因此我继续使用该属性来设置 mat-list- 样式选项标签。

@TanmayParmar 也请为答案投票，这对寻找答案的用户很有帮助。

很好的解决方案。我一直在使用打字稿中的一种方法，该方法检查一个项目是否在所选项目的列表中，但是针对已经提供的实际属性 angular 会好得多。感谢您指出。

【参考方案2】：

接受的答案可以正常工作，但它使用硬编码颜色值 (background: rgba(0, 139, 139, 0.7))。 如果您决定切换到另一个预构建材料主题或使用自定义主题（如Theming your Angular Material app 页面中所述），这种方法实际上会破坏您的样式和颜色。

因此，如果您使用 SCSS，您可以在组件的样式文件中使用以下代码：

@import '~@angular/material/theming';

mat-list-option[aria-selected="true"] 
  background: mat-color($mat-light-theme-background, hover, 0.12);

上面的代码改编自mat-select options——这样你在整个应用中就会有一个一致的外观： .mat-option.mat-selected:not(.mat-option-multiple) background: mat-color($background, hover, 0.12);

演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-qaq1xr

或者，如果您使用深色主题，请按如下方式更改代码：

mat-list-option[aria-selected="true"] 
  background: mat-color($mat-dark-theme-background, hover, 0.12);

演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-w8beng

如果你只是想使用自定义颜色，我建议从Material Specs 中选择一个，它也在Angular Material Design scss 中公开。

$primaryPalette: mat-palette($mat-green);

mat-list-option[aria-selected="true"] 
  background: mat-color($primaryPalette, 500);

演示：https://stackblitz.com/edit/material-selection-list-5-0-0-selection-color-change-tt3nyj

【参考方案3】：

下拉：

mat-list-option在选项处于活动状态时触发mat-option.mat-active 987654325 mat-option.mat-selected选择选项时。根据您的需要，将以下内容添加到您的 CSS 以修改活动或选定样式。

.mat-option.mat-active 
  background: blue !important;


.mat-option.mat-selected 
  background: red !important;

工作Demo

选择列表：

选择列表具有aria-selected 属性，默认为false。如果您选择该项目，它将更改为true。您只需将 CSS 设置如下：

.mat-list-option[aria-selected="true"] 
  background: rgba(200, 210, 90, 0.7);

工作Demo

【讨论】：

我正在使用选择列表。这是下拉菜单。

@TanmayParmar 编辑我的选择列表答案。

【参考方案4】：

有时使用[aria-selected] 似乎太“迟钝”了。

您还可以获取节点的选定状态并根据需要使用它。

示例 1：您有一个子组件需要将状态传递给

<mat-list-option #option>

   <app-custom-list-option-widget [selected]="option.selected"></app-custom-list-option-widget>

</mat-list-option>

示例 2：您想要设置自定义 css 类而不是使用 [aria-selected]

.is-selected  color: red; 

然后在模板中：

<mat-list-option #option>

   <span [class.is-selected]="option.selected"> Option text </span>

</mat-list-option>

【参考方案5】：

对于 mat-list-option 属性 css 的变化，

改变 onHover css :

   .mat-list-option:hover 
      width: 270px!important;
    

更改 OnActive css：

 .mat-list-option[aria-selected="true"] 
      width: 270px!important;
    
    .mat-list-option:active,
    .mat-list-text:active
    background-color: none!important;