css - 设置 Angular 材质滑块的样式,使其更厚/更高
问题描述
我在这里找到魔法酱时遇到问题。它看起来 API 不支持它,所以我想我正在寻找一些 CSS 来使滑块更大。
我得到了左边那个,但我想把它设计成右边那个?任何 CSS 技巧或以前有人这样做过。
特别是“栏”的高度。有一百万个东西设置为高度:2px。我尝试增加所有这些但没有任何改变..我想可能是边界或其他什么?
提前致谢!
StackBlitz: https ://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css (感谢@Andriy)
解决方案
您可以尝试将此 CSS 添加到全局样式:
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
background-color: blue;
}
.mat-accent .mat-slider-thumb {
height: 30px;
width: 30px;
background-color: white;
border: solid 2px gray;
bottom: -20px;
right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
background-color: white;
}
如果您需要在具有默认封装的任何组件的 CSS 文件中包含这些样式,只需在每个 CSS 规则之前添加::ng-deep
(但要注意它的长期弃用,因此请检查每个新版本的 Angular):
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
如果使用 SASS,只需使用 :: 包装您的代码ng-deep
::ng-deep {
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
}
请注意,这样您的 CSS 将影响全局 CSS 范围。
推荐阅读
- ios - iOS UITableView 出现两次
- css - 为什么不在 CSS 中定位按钮标签而不是类?
- qt - Qt OpenGL 从 5.10.0 升级到 5.12.1 遇到的问题
- javascript - AG Grid 中未设置多个复选框
- powershell - 使用 powershell 获取 Skype for Business 联系人状态
- java - 如何在循环中处理 CompletableFuture 线程
- r - 需要帮助优化大型网络抓取任务中的循环
- python - 将 PDF 艺术作品放置在特定位置的 Reportlab 画布上
- android - 如何在保持 Android 系统装饰的同时,获取自定义通知的整体情况?
- c# - 实体框架核心查询类型未将结果映射到对象