10

如何更改所选选项的颜色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>
4

5 回答 5

16

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

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

Stackblitz 工作演示

于 2018-11-23T06:46:53.067 回答
5

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

因此，如果您使用 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

于 2020-03-05T16:14:27.533 回答
4

落下：

The mat-list-optionhas mat-option.mat-activewhich triggered when option is active and mat-option.mat-selectedwhen an option is selected. 根据您的需要，将以下内容添加到您的 CSS 以修改活动或选定样式。

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

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

工作演示

选择列表：

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

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

工作演示

于 2018-11-22T23:56:58.483 回答
0

有时使用[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>
于 2021-06-28T21:31:31.117 回答
0

对于 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;
    }
于 2021-11-29T16:50:31.740 回答