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

Posted 2023-03-06

【中文标题】尺寸角材料滑动开关（小、中、大）

【英文标题】：Size Angular Material Slide Toggle (small, medium, large)

【发布时间】：2020-06-05 02:39:34

【问题描述】：

我想在我的 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 组件的大小？

【参考方案1】：

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

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

【参考方案2】：

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

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

【参考方案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 默认样式更具体，因此它会覆盖它。

参考资料：

https://material.angular.io/guide/customizing-component-styles#styling-overlay-components https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【参考方案4】：

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

【讨论】：

谢谢，很遗憾我无法完全应用它。我无法正确影响 translate3d 以反映大小的变化。但是你给了我一个很好的起点。如果你有更多的建议在这里我的bitz：stackblitz.com/edit/angular-material-slidetoggle

您能与我分享代码，以便我可以帮助您解决问题吗？

好的，所以我找到了为什么 translate 属性不适用于您的问题。您需要嵌套 CSS 选择器 .difSized.mat-slide-toggle.-mat.checked 因为 .difSized 元素内部有这些类，而不是子元素。这是经过编辑的 stackblitz 以供进一步调查：stackblitz.com/edit/angular-material-slidetoggle-rjgs2n 您仍然需要探索如何修复其他样式属性，但是，现在您可以在切换器中设置所有样式。

很高兴我能帮助你:) 而且......完全同意你的看法！在 Material 中更改这些简单的东西需要进行大量的调整，这既烦人又费时。

我知道这有点老了，但 ::ng-deep 不是被弃用了吗？ angular.io/guide/component-styles#deprecated-deep--and-ng-deep 避免使用 ::ng-deep 的一种解决方案是确保上述代码位于全局样式文件中，删除所有 ::ng-deep，并在每个选择器前加上 'mat-slide-toggle.mat-滑动切换'。这将覆盖当前的 mat-slide-toggle 样式，因为它更具体。