如何设置angular2材质的滑动切换按钮的样式 [英] How to style the angular2 material slide-toggle button

问题描述

我对Angle 2和材质设计还是陌生的. 我想知道如何将滑动切换按钮设置得更小.

I am new to angular 2 and material design. I would like to know how to style the slide-toggle button to be smaller.

 <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;
 }

我想减小按钮的尺寸并减小滑块的高度.

I would like to decrease the size of the button and reduce the height of the slider.

推荐答案

我发现您可以在CSS中使用/deep/，但您还必须定位特定的类.

I've found you can use /deep/ in the css but you also have to target the specific classes.

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

viewEncapsulation还有其他需要注意的地方，因为deep可以使您打破这种约定，因为样式是使用Angular设置的，因此可以内联应用.

Something else to keep in mind is viewEncapsulation because deep allows you to break this convention since the styles are set in such a way with Angular that they are applied inline.

相关堆栈文章:如何覆盖角度2的材质样式?

相关Angular文档: https://angular.io/guide/component-样式#！#-deep-

Related Angular Documentation: https://angular.io/guide/component-styles#!#-deep-

这篇关于如何设置angular2材质的滑动切换按钮的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！