英文:
Style material slider ticks
问题
Using @angular/material 12.2
我想要为这些刻度添加一些样式（宽度和颜色）。我可以通过修改类.mat-slider-ticks和.mat-slider-ticks-container来改变刻度的高度，但对于宽度和颜色来说，这并不起作用。
从angular/components源代码中，我找到了这个：
.mat-slider-ticks {
@include vendor-prefixes.private-background-clip(content-box);
background-repeat: repeat;
box-sizing: border-box;
opacity: 0;
transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
}
英文:
Using @angular /material 12.2
I want to add some style (width and color) to these ticks
I could change the tick height by modifying classes .mat-slider-ticks and .mat-slider-ticks-container, but it's not working for width and color.
From the angular/components source code, I found this :
.mat-slider-ticks {
@include vendor-prefixes.private-background-clip(content-box);
background-repeat: repeat;
box-sizing: border-box;
opacity: 0;
transition: opacity variables.$swift-ease-out-duration variables.$swift-ease-out-timing-function;
}
答案1
得分: 1
以下是翻译好的代码部分：
.custom-slider {
.mat-mdc-slider .mdc-slider__tick-mark--active,
.mat-mdc-slider .mdc-slider__tick-mark--inactive {
height: 4px;
width: 4px;
background-color: red;
}
}
如果您需要更多的翻译或有其他问题，请随时提出。
英文:
I was able to do this with the following rules. Note that I wrapped the mat-slider in a div with the custom-slider class as a way to avoid using !important. However, you can include just the inner rules in your global style if you don't mind the !important override.
.custom-slider {
.mat-mdc-slider .mdc-slider__tick-mark--active,
.mat-mdc-slider .mdc-slider__tick-mark--inactive {
height: 4px;
width: 4px;
background-color: red;
}
}
https://stackblitz.com/edit/angular-ygsg95?file=src%2Fstyles.scss
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论