gpt4 book ai didi

css - 设置 Angular Material Slider 的样式,使其更厚/更高

转载 作者:太空狗 更新时间:2023-10-29 12:22:24 39 4
gpt4 key购买 nike

我在这里找不到神奇的调味料。看起来 API 不支持它,所以我想我正在寻找一些 CSS 来使 slider 更大。

enter image description here

我得到的是左边的,但我想把它设计成右边的样子?任何 CSS 技巧或以前有人这样做过。

特别是“栏”的高度。有一百万个东西设置为 height: 2px。我尝试了所有这些但没有任何改变..我想这可能是边界或其他什么?

提前致谢!

堆栈 Blitz : 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;
}

STACKBLITZ

如果您需要在任何组件的 CSS 文件中使用默认的这些样式 encapsulation ,只需在每个 CSS 规则之前添加 ::ng-deep (但要注意它的长期运行 deprecation ,因此请在每个新版本的 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 范围。

关于css - 设置 Angular Material Slider 的样式,使其更厚/更高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52339591/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com