angular - Angular 材质 mat-slide-toggle 更改切换图标

Question

我正在使用 angular6 来布局我的 UI。

默认的 mat-slide-toggle 按钮如下所示：

但我希望切换按钮看起来像下面的材料图标 toggle_on ， toggle_off

可以定制吗？

非常感谢。

标签： angularangular-materialgoogle-material-icons

Answer 1

您可以覆盖应用于 Material滑动切换组件的默认样式。我必须警告你，这样做有点笨拙。但是，这是我对您的屏幕截图的看法。

为此需要的样式：

.mat-slide-toggle-thumb {
    width: 10px !important;
    height: 10px !important;
    transform: translate(50%, 50%);
}

.mat-slide-toggle-bar {
  background-color: #000;
  border-radius: 15px !important;
  height: 16px !important;
}

.mat-slide-toggle-thumb-container {
  top: -2px !important;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #000;
}

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #fff;
}

不幸的是，!important需要一些来推翻由 Angular 的 Material CSS 设置的默认样式。您可以在 StackBlitz 上查看示例。