角形材料 6 个不同颜色的垫子滑块 [英] angular material 6 multiple mat-sliders with different colors
问题描述
我在一个页面中有 3 个垫子滑块",我希望滑块有 3 种不同的颜色.我无法覆盖页面(组件)的主题颜色,因为它将应用于所有滑块.我是否必须为滑块制作 3 个不同的组件并覆盖每个组件的主题颜色?实现这一目标的最简单方法是什么?以下是我的角度和包版本,
i have 3 'mat-slider's in a page and i want to have 3 different colors for the sliders. i cant override the theme colors for the page(component) as it will apply to all the sliders. do i have to make 3 different components for the sliders and override theme colors in each? what is the easiest way to achieve this? below are my angular and package versions,
Angular CLI: 6.0.8
Node: 8.9.4
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.3.0
@angular/cli 6.0.8
@angular/flex-layout 6.0.0-beta.16
@angular/material 6.3.0
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2
webpack 4.8.3
推荐答案
这可能不是最好的方法,但当您要求最简单的方法时,这里有一个解决方案.
This may not be the best way but as you ask for the easiest way here is a solution.
给每个滑块一个类:
// home.component.hmtl
<mat-slider class="mat-slide-1"></mat-slider>
<mat-slider class="mat-slide-2"></mat-slider>
<mat-slider class="mat-slide-3"></mat-slider>
在你的styles.scss 中引用这些类,并在每个类中定义你希望改变颜色的元素并使其变得重要:
In your styles.scss reference these classes and in each class define the element you wish to change the colour of and make it important:
// styles.scss
.mat-slide-1 {
.mat-slider-thumb {
background-color: red !important;
}
}
.mat-slide-2 {
.mat-slider-thumb {
background-color: yellow !important;
}
}
.mat-slide-3 {
.mat-slider-thumb {
background-color: green !important;
}
}
此示例仅更改拇指的颜色,但检查滑块的元素以查找与您要更改的元素相关的类.
This example only changes the colour of the thumb but inspect the elements of the slider to find the class relevant to the element you want to change.
更正确的解决方案是使用多个主题并将它们分别应用于每个组件.请参阅材料文档.
A more correct solution would be using multiple themes and applying them separately to each component. Refer the material docs.
这篇关于角形材料 6 个不同颜色的垫子滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!