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

Question

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

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

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

可以定制吗？

非常感谢。

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 上查看示例。

Answer 2

主题化

可以使用 color 属性更改 a 的颜色。默认情况下，滑动切换使用主题的强调色。这可以更改为“主要”或“警告”。

您可以使用规则更改相同的 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 3

当我想知道如何在材质 mat-slide-toggle 的中心添加一个图标时，我遇到了这个问题

如何在材质幻灯片切换的中心添加图标？

我们需要滑动切换在它的中心有一个图标（在这里你可以看到切换按钮中心的 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);
}

这是StackBlitz 上的工作示例演示

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