我想更改垫子滑块的颜色动态。我有一个应用程序,用户可以从色标中选择任何一种颜色,我想将该颜色显示为滑块颜色。
我知道您可以在color属性中添加自定义颜色名称,但就我而言,颜色名称不是固定的。可以是色pa中的任何颜色。
<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" thumbLabel="true" color="green" thumbLabel min="0" max="10" step="1"></mat-slider>
在此,我将在lifeArea.color
中获得颜色代码
答案 0 :(得分:0)
在使用材料成分时, 颜色属性仅接受主题中默认的三种颜色,即主色,警告色和强调色。
如果要为材料组件分配自定义颜色,则可以为其分配类,并为该颜色提供所需的CSS。
对于您来说,颜色是动态填充的。 因此,您可以使用ngStyle指令来实现此目的。
答案 1 :(得分:0)
据我所知,您无法根据需要设置颜色。滑垫滑块的颜色应根据Angular Material documentation为ThemePalette
。
要做到这一点,Angular Material应该支持主要,强调,警告之外的其他颜色,但事实并非如此。
我认为您唯一的选择是定义一个覆盖了mat-silder样式的css样式表来设置背景颜色:
答案 2 :(得分:-1)
尝试一下:
HTML
<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title"
thumbLabel="true" [color]="lifeArea.color" thumbLabel min="0" max="10" step="1"></mat-slider>
您需要使用color
属性进行属性绑定。