角材料垫-滑动-切换更改切换图标

Question

我正在使用angular6来布局UI。

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

但是我希望切换按钮在材质图标toggle_on，toggle_off中看起来像下面一样

可以自定义它吗？

非常感谢。

Answer 1

主题

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

您可以使用规则更改

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

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

为此所需的样式：

.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

当我想知道如何在材质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);
}

这是working example demo on StackBlitz

注意：我使用了公认答案提供的代码段。