问题描述
我想使用带有拇指标签的垫子滑块,该滑块在移动时不会随滑块一起移动。 我看到整个“垫子滑块拇指容器”的方式是沿着滑块移动的“变换:translateX(xx%)”样式 所以我猜如果我添加了相同的样式,但在“mat-slider-thumb-label”中添加了 -xx%,它应该始终位于滑块的中心?
<div class="mat-slider-thumb-container" style="transform: translateX(-100%);" ng-reflect-ng-style="[object Object]"><div class="mat-slider-focus-ring"></div><div class="mat-slider-thumb"></div><div class="mat-slider-thumb-label"><span class="mat-slider-thumb-label-text">0</span></div></div>
现在,首先,angular 是如何获得 xx% 的,我怎样才能获得这个值? 一种解决方法是仅使用滑块的实际值和最小值/最大值来计算百分比,但 angular 必须将此百分比存储在某个变量中,因此我觉得使用相同的变量会更优雅角度必须使用。
我尝试使用指令将 'tranform:translateX(xx%)' 的样式添加到具有 'mat-slider-thumb-label' 类的元素,但它似乎忽略了它。当我添加其他样式时,它工作得非常好,例如:背景颜色或宽度,但转换似乎完全被忽略,我真的不明白为什么。
export class FixThumbLabelDirective implements OnChanges {
constructor(private renderer: Renderer2,private elRef: ElementRef) {}
@input() thumbLabelPos: number;
ngOnChanges() {
this.renderer.setStyle(
this.elRef.nativeElement.children[0].children[2].children[2],'transform','translateX(' + this.thumbLabelPos * 10 + 'px)'//this obvIoUsly needs a properly calculated % value,just put it that way to make changes definitely noticeable
);
console.log(this.thumbLabelPos);
}
}
我还尝试了其他转换值,例如 px 而不是 % 或旋转元素,但似乎没有任何效果。
我的 html:
<mat-slider appFixThumbLabel [thumbLabelPos]='value' [(ngModel)]="value"
value="value" thumbLabel >
</mat-slider>
这是我在这里实际发布的第一个问题,我希望我足够清楚地表达了我的问题,欢迎所有寻求解决方案的建议
解决方法
好的。我想我发现了我的问题。在我的 css 中的某个地方有另一个转换,在 mat-slider-thumb-label 类上使用 !important...