1

我想在使用 Angular 7 和材料设计显示的列表上具有悬停颜色。由于$primary,$accent和$warn颜色 不能很好地达到这个目的，我想获得与悬停时按钮相同的悬停颜色。我目前正在使用材料设计多主题示例中的 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;

}

我试图通过hoverand获取颜色focused-button，正如 TimTheEnchanter 在这个答案中列出的那样，但是这不起作用（我最终没有任何可见的悬停效果）。

4

1 回答 1

5

我直接从主题中获取颜色的假设是错误的，我必须先获取调色板。因此，正确的方法是首先查询（在我的情况下使用聚焦按钮颜色）调色板并从所述调色板中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 和 $warn 调色板获取相同的三个颜色值。

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

  • 根据
  • 分隔线
  • 分隔线
  • 禁用
  • 禁用按钮
  • 禁用文本
  • 提示文本
  • 次要文本
  • 图标
  • 图标
  • 文本
  • 滑块关闭
  • 滑块关闭活动

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

  • 状态栏
  • 应用栏
  • 背景
  • 徘徊
  • 卡片
  • 对话
  • 禁用按钮
  • 凸起按钮
  • 焦点按钮
  • 选择按钮
  • 选定的禁用按钮
  • 禁用按钮切换
于 2019-05-02T09:27:14.997 回答