Question

我是角度2和材料设计的新手。我想知道如何将滑动切换按钮的样式设置得更小。

 <div class="example-section">
  <mat-slide-toggle class="line-toggle"
    <span class="font-size-12">Slide Me</span>
  </mat-slide-toggle>
</div>

css如下

  .example-section {
  display: flex;
  align-content: center;
  align-items: center;
  height: 18px;
  margin-top: -12px;
}
 .line-toggle{
  height: 10px;
  line-height: 8px;
 }

我想减小按钮的大小并减小滑块的高度。

Answer 1

我发现你可以在css中使用/ deep /，但你也必须定位特定的类。

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
}
/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

要记住的其他事项是viewEncapsulation，因为deep允许你破坏这个约定，因为样式是以Angular的方式设置的，它们是内联的。

相关的帖子帖子：How to overwrite angular 2 material styles?

相关角度文档：https://angular.io/guide/component-styles#!#-deep-

Answer 2

@ tallgeese117的回答确实非常有帮助。我想在他们的答案中添加几行代码，以使其以所需的大小显示切换，并显示：

/deep/ .mat-slide-toggle-bar {
  height: 7px !important;
  width: 28px !important;
}

/deep/ .mat-slide-toggle-thumb {
  height: 10px !important;
  width: 10px !important;
}

/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(18px,0,0) !important;
}

/deep/ .mat-slide-toggle-thumb-container {
    width: 12px !important;
    height: 12px !important;
    top: -2px !important;
}

Answer 3

我使用了@ tallgeese117提供的解决方案。但是在VScode中，CSS文件显示为红色（\deep\），这很烦人。我找不到忽略这种CSS皮棉检查的方法。因此，我尝试了一种替代方法（动态更改CSS ）。我在下面将其粘贴给其他人：

    ngOnInit() {
        let eleArray = document.getElementsByClassName('mat-slide-toggle-content');
        for(let i = 0 ; i < eleArray.length; i++) {
          // @ts-ignore
          eleArray[i].style.cssText = 'font-size:6vw;';
        }
    }

Answer 4

正如其他人提到的，您需要设置 mat-slide-toggle（mat-slide-toggle-bar、mat-slide-toggle-thumb 等）的内部类的样式。但是， /deep/ 和 ::ng-deep 已弃用，因此您不应使用它们。一种选择是设置比组件上的默认样式更具体的全局样式。因此，在全局样式文件中，您可以执行以下操作：

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-bar {
  height: 8px;
  width: 26px;
}

mat-slide-toggle.mat-slide-toggle .mat-slide-toggle-thumb {
  height: 14px;
  width: 14px;
}

//...etc

组合组件名称和类名称比 mat-slide-toggle 默认样式更具特异性，因此它会覆盖它。

参考文献：

如何设置angular2材质滑动切换按钮的样式

4 个答案: