Angular material mat-slide-toggle 更改切换图标

Question

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

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

但我希望切换按钮看起来像下面的 material-图标 toggle_on , toggle_off

可以定制吗？

非常感谢。

Answer 1

主题

可以使用颜色属性更改 a 的颜色。默认情况下，滑动切换使用主题的强调色。这可以更改为 'primary' 或 'warn'。

您可以使用规则

更改 css

mat-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: black; /* set your color here */
}

您还可以根据类型设置不同的颜色：

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

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

Answer 2

您可以覆盖应用于 Material slide toggle component 的默认样式。我必须警告你，这样做有点 hacky。但是，这是我对您的屏幕截图的看法。

为此需要的样式：

.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 设置的默认样式。您可以查看example on StackBlitz.

Answer 3

当我想知道如何在 material mat-slide-toggle

的中心添加图标时，我遇到了这个问题

如何在 material 滑动切换中心添加图标？

我们需要滑动切换按钮的中央有一个图标（这里你看到 Google Crhome 图标在切换按钮的中央），类似下图：

您需要做的是将您想要的图像（作为图标）设置为切换按钮的背景图像 (.mat-slide-toggle-thumb)

.mat-slide-toggle-thumb {
    width: 18px !important;
    height: 18px !important;
    transform: translate(0%, 0%);
  background-image: url(https://cdn0.iconfinder.com/data/icons/flat-round-system/512/chrome_browser-512.png) !important;
  background-origin: content-box;
  background-size: contain;
  background-position: center center;
}

.mat-accent .mat-slide-toggle-thumb{
  filter: grayscale(100%);
}

.mat-checked .mat-slide-toggle-thumb{
  filter: grayscale(0);
}

这里是working example demo on StackBlitz

注意：我使用了已接受答案提供的代码片段。

Angular material mat-slide-toggle 更改切换图标

Angular material mat-slide-toggle change toggle icon

angular-material

google-material-icons

angular

如何在 material 滑动切换中心添加图标？