Angular Material mat-slider的固定thumblabel_编程开发

Angular Material mat-slider的固定thumblabel

创始人

2024-10-19 18:00:52

0次

要实现Angular Material mat-slider的固定thumblabel，可以使用CSS样式来设置thumblabel的位置。以下是一个示例的解决方法：

首先，在HTML模板中添加mat-slider元素，并设置thumbLabel属性为true：

接下来，使用CSS样式来固定thumblabel的位置。在组件的CSS文件中添加以下样式：

::ng-deep .mat-slider-thumb-label {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

这段样式将thumblabel的位置固定在滑块上方的垂直中心位置。使用transform属性的translateY函数将thumblabel向上移动50%的高度，然后使用top属性将其垂直居中对齐。left属性将其水平居中对齐，width属性设置为100%以确保thumblabel的宽度与滑块相同。最后，pointer-events属性设置为none，以确保thumblabel不会影响用户与滑块的交互。

通过以上步骤，就可以实现Angular Material mat-slider的固定thumblabel效果。

上一篇：angular material mat-slide-toggle 在 mat-form-field 内

下一篇：Angular Material Mat-Stepper: 如何在多个步骤中使用相同的表单组？

Angular Material mat-slider的固定thumblabel

相关内容

热门资讯