Question

我想在Angular 8项目的页面上增加“材质幻灯片”切换的大小。我尝试将大小设置为大，如下所示：

mat-slide-toggle {
  height: 100px;
  width: 100px;
}

但是，将大小从小，中和大更改为不变。它保持与屏幕大小相同。我还尝试过向组件添加样式，如下所示：

{{1}}

但这不会改变可见组件的大小，但是会增加该组件所在的div。

如何更改“材质幻灯片切换组件”的大小？

Answer 1

发生这种情况的原因是您正在设计此组件的包装器。如果封装了样式，则需要使用:: ng-deep选择器来设置该组件的特定类的样式，即.mat-slide-toggler-bar和.mat-slide-toggle-thumb。这是一个示例，可让您开始使用切换开关的尺寸越来越大的游戏：

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

::ng-deep .mat-slide-toggle-thumb {
  height: 10px;
  width: 10px;
}

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

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

Answer 2

我认为最简单的解决方案是在 .mat-slide-toggle 上简单地使用 scale()。我就是这样做的，而且效果很好：

.mat-slide-toggle {
    transform: scale(0.6);
}

Answer 3

如所选答案中所述，您需要设置 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 默认样式更具特异性，因此它会覆盖它。

参考文献：

Answer 4

只需在此代码中设置您喜欢的尺寸：

::ng-deep {
 .mat-slide-toggle-thumb {
   height: 25px;
   width: 25px;
 }
 .mat-slide-toggle-thumb-container {
   width: 25px;
   height: 25px;
 }

.mat-slide-toggle-bar {
  width: 42px;
  height: 20px;
  border-radius: 10px;
}

}

大小角材料滑动切换（小，中，大）

4 个答案: