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

Question

我是Angle 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设置的，因此可以内联应用。

相关堆栈文章：如何覆盖角2材质样式？

相关的Angular文档：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;
}