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

问题描述

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

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

css如下

 .example-section {显示:弹性；对齐内容:居中；对齐项目:居中；高度:18px；边距顶部:-12px；}.line-toggle{高度:10px；行高:8px；}

我想减小按钮的大小并降低滑块的高度.

解决方案

我发现你可以在 css 中使用/deep/但你也必须针对特定的类.

/deep/.mat-slide-toggle-bar {高度:7px！重要；}/deep/.mat-slide-toggle-thumb {高度:10px！重要；宽度:10px！重要；}

还有一点要记住的是 viewEncapsulation，因为 deep 允许你打破这个约定，因为样式是用 Angular 设置的，它们是内联应用的.

相关堆栈帖子:如何覆盖 angular 2 材质样式?

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

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>

The css is as below

  .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.

解决方案

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

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.

Related stack post: How to overwrite angular 2 material styles?

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

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