angular6 - 角度材料 6 个不同颜色的多个垫子滑块
问题描述
我在一页中有 3 个“垫子滑块”,我希望滑块有 3 种不同的颜色。我不能覆盖页面(组件)的主题颜色,因为它将应用于所有滑块。我是否必须为滑块制作 3 个不同的组件并在每个组件中覆盖主题颜色?实现这一目标的最简单方法是什么?以下是我的角度和包装版本,
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
解决方案
这可能不是最好的方法,但是当您要求最简单的方法时,这是一个解决方案。
给每个滑块一个类:
// 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 中引用这些类,并在每个类中定义您希望更改颜色并使其重要的元素:
// 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;
}
}
此示例仅更改拇指的颜色,但检查滑块的元素以查找与要更改的元素相关的类。
更正确的解决方案是使用多个主题并将它们分别应用于每个组件。请参阅材料文档。
推荐阅读
- excel - 如何根据 VBA 中的选定变量修复复制和粘贴可见单元格 - Excel
- http - Thinkster Mean Stack 教程 - 注册操作给出 500 错误 - 使用 Chrome 和 Windows 7
- php - 删除
字符串之前的标签 - python - 如何从已在 OpenCV 中标记的图像中获取区域属性?
- c# - 在特定秒开始播放歌曲
- solr - Solr:如何计算不同元素的数量
- python - 根据熊猫数据框中的多个条件为列分配值
- java - Java 接受无效的正则表达式。这是一个 Java 错误还是对期望的错误解释
- javascript - Karma + Webpack + Angularjs - 所有测试都通过但业力错误 w/exit code 1
- javascript - 使用 SetState 在反应中更新数组对象中的一项