动态更改垫子滑块颜色

Question

在 Angular Material v17 应用程序中，滑块应根据某些外部状态更改颜色：

<mat-slider [color]='sliderPalette()'>
  <input matSliderThumb #s>
</mat-slider>

哪里

/*
 * The theme defines three primary, accent, and warn color palettes.
 */
public sliderPalette() {
  return state ? 'accent' : 'warn';
}

这个效果很好。

但是我不想使用活动主题的调色板，而是想定义两个不同的调色板并使用它们：

/*
 * Color palettes not related to the theme.
 */
public sliderPalette() {
  return state ? 'color-palette-state-0' : 'color-palette-state-1';
}

在我的

theme.scss

主题定义文件中定义：

$color-palette-state-0: mat.define-palette(mat.$blue-palette);
$color-palette-state-1: mat.define-palette(mat.$red-palette);

或者只是重新定义 Angular Material 的预定义蓝色和红色调色板：

$color-palette-state-0: mat.$blue-palette;
$color-palette-state-1: mat.$red-palette;

但是这些都不起作用——滑块只是变成静态紫色，没有错误消息。

Angular Material Slider API 文档暗示这是不可能的：

@Input()
color: ThemePalette     Palette color of the slider.

所以

color

是

ThemePalette

所以调色板 have 可能是主题的一部分。

有趣的是，Angular Material Button API 是不同的：

@Input()
color: string | null    Theme color palette of the button

所以，也许这是滑块的错误/设计问题。

有什么想法如何动态更改

mat-slider

的颜色（最好不覆盖内部样式）？但是，实际上，在这一点上，我会采取任何解决方案。

Answer 1

如果您查看

ThemePalette

here的定义，您会发现它实际上是材质主题上的预设调色板之一。此处无法应用自定义调色板。

它大致基于材质设计颜色系统规范 v2，因此 Angular Material 的“内部结构”实际上没有处理主题内定义的其他调色板的方法。

如果您想使用内置主题工具，您可以做的是在两个定义的主题和/或预定义的主题调色板之间切换。这是我推荐的方法。

您将必须定义多个主题，并且仅在某些情况下应用一个主题，例如如果容器包含某个类：

// Define a dark theme
$dark-theme: mat.define-dark-theme((
 color: (
   primary: mat.define-palette(mat.$pink-palette),
   accent: mat.define-palette(mat.$blue-grey-palette),
 ),
  // Only include `typography` and `density` in the default dark theme.
  typography: mat.define-typography-config(),
  density: 0,
));

// Define a light theme
$light-theme: mat.define-light-theme((
 color: (
   primary: mat.define-palette(mat.$indigo-palette),
   accent: mat.define-palette(mat.$pink-palette),
 ),
));

// Apply the dark theme by default
@include mat.core-theme($dark-theme);
@include mat.all-component-themes($dark-theme);

.use-light-theme {
  @include mat.core-color($light-theme);
  @include mat.all-component-themes($light-theme);
}

然后您可以通过从元素中添加/删除类来动态应用两个主题之一：

<mat-slider [ngClass]="{'use-light-theme': useOtherTheme}">
  <input matSliderThumb />
</mat-slider>

或者，您可以将调色板导入到组件的样式表中，手动提取它们的值并将它们应用到不同的 .css 变量，这些变量将颜色应用于滑块：

.use-some-color {
  --mdc-slider-handle-color: #{mat.get-color-from-palette($color-palette-state-0, default)};
  --mdc-slider-active-track-color: #{mat.get-color-from-palette($color-palette-state-0, default)};
  --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($color-palette-state-0, default)};
}

.use-other-color {
  --mdc-slider-handle-color: #{mat.get-color-from-palette($color-palette-state-1, default)};
  --mdc-slider-active-track-color: #{mat.get-color-from-palette($color-palette-state-1, default)};
  --mdc-slider-inactive-track-color: #{mat.get-color-from-palette($color-palette-state-1, default)};
}

然后在班级之间切换：

<mat-slider [ngClass]="{'use-some-color': !useOtherColor, 'use-other-color': useOtherColor}">
  <input matSliderThumb />
</mat-slider>

当然，要实现这一点，您必须确切知道调色板中的哪种色调应用于哪个变量，因此您可能需要查看

mat-slider

的源代码。此外，在版本更改后，这可能比第一个解决方案更容易出错。

这是一个工作堆栈闪电战。请注意，它既快又脏（即将整个 theme.scss 导入组件，哎呀！），但应该给你正确的想法。