尺寸 角度材料 滑动开关（小、中、大）

Question

我想增加 Angular 8 项目页面上 Material Slide Toggle 的大小。我尝试将尺寸设置为大，如下所示：

<mat-slide-toggle size="large" color="primary"></mat-slide-toggle>

然而，将尺寸从小、中、大改变没有任何改变。它保持与屏幕尺寸相同。我还尝试向组件添加样式，如下所示：

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

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

如何更改 Material Slide Toggle 组件的大小？

Answer 1

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

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

这可能会将滑块向右移动。要解决这个问题：

 .mat-slide-toggle {
        transform: scale(0.6) translateX(-10px); //adjust the pixels to your scale size i
 }

Answer 2

发生这种情况是因为您正在设计该组件的包装器。如果您的样式被封装，您需要使用 ::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;
}