Question

我希望在使用Angular 7和材质设计显示的列表上具有悬浮颜色。由于$primary，$accent和$warn的颜色不能很好地满足此目的，因此我希望获得与悬停时按钮具有的相同颜色。我目前正在使用material design multiple-themes example中的candy-app-theme和dark-theme，所以我自己没有定义此颜色。

要定义我的悬停颜色，我需要查询此按钮的悬停颜色。因此：如何查询该颜色？

@mixin options-component-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.

    //i have tried these two:
    $hover: map-get($theme, hover);
    $focused-button: map-get($theme, focused-button);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);

    .listItemFormat:hover {
    background-color: $focused-button;

}

我试图通过hover和focused-button，as listed in this answer by TimTheEnchanter来获得颜色，但这是行不通的（我最终根本没有任何可见的悬停效果）。

Answer 1

我直接从主题获取颜色的假设是错误的，我必须先获取调色板。因此，正确的方法是首先查询background调色板（在我的情况下为焦点按钮颜色），然后从所述调色板中获取focused-button颜色。

问题代码必须进行以下调整：

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

@mixin options-component-theme($theme) {

    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.

    $background-palette: map-get($theme, background);

    $primary-color: mat-color($primary);
    $accent-color: mat-color($accent);
    $focused-button-color: mat-color($background-palette, focused-button);

   .listItemFormat:hover {
    background-color: $focused-button-color;
   }
}

为完整起见，这是我在原始问题中引用的答案列表的副本：

出于完整性考虑，以下是您可以从中获得的元素的列表   不同的调色板：来自“主要”调色板（$ primary和   $ dark-p在我上面的代码中）：


默认

打火机

较暗


对于$ accent和$ accent，您还可以获得相同的三种颜色值   $ warn调色板。

从“前景”面板（$ light-foreground-palette和   我上面的代码中的$ dark-foreground-palette）：


基地

除法器

分频器

已禁用

禁用按钮

禁用文本

提示文字

次要文本

图标

图标

文本

滑行

关闭滑块


从“背景”调色板（$ light-background-palette和   我上面的代码中的$ dark-background-palette）：


状态栏

应用栏

背景

悬停

卡

对话

禁用按钮

升起按钮

焦点按钮

选定按钮

已选择禁用按钮

禁用按钮切换

如何获取特定组件的当前角度主题颜色（例如按钮悬停背景）？

1 个答案: