主页 / 问题 / 999480
Accepted
Dmytro
Asked:2020-07-05 01:27:38 +0000 UTC2020-07-05 01:27:38 +0000 UTC

Angular 2/8 + Mafterial 将图标添加到幻灯片切换

  • 772

大家好。

有必要在启用的幻灯片切换中添加一个图标，如下所示：

在此处输入图像描述

理想情况下，图像可以取自资产。标准 API 不提供这样的机会。我发现了一个问题，他们通过 CSS 自定义了开关的外观，但很可惜，没有任何结果。我的尝试看起来像这样：

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
     background-image: url('http://cdn.onlinewebfonts.com/svg/img_201862.png') !important;
   }

我还尝试将图像放入内容中： url(...)

P / s：不注意颜色或绑定到功能。问题的本质恰恰是在switch里面放了一张图片，因为原​​则上我是做不到的……曾经看到一个类似的实现，但是需要的时候却找不到:(

官方文档链接：https ://material.angular.io/components/slide-toggle/api也许会有所帮助...

提前致谢。

css

1 个回答

  1. Best Answer

    正如过度理智向我建议的那样，起初我使用了simple-icon-toggle包，但事实证明，该包无法正常工作（我向作者创建了一个错误请求）。错误是包在自身内部查找 node_modules 组件并尝试沿路径访问它们，例如：“ C:\Project\node_modules\simple-icon-toggle\node_modules@angular\core\esm5 ”。

    因为这个包几乎涵盖了我需要的所有功能，所以我使用这个包的源代码来创建我自己的组件。顺便说一句 - 该组件可以很好地使用此源代码并且无需编辑。

    再次感谢overthesanity的提示。

    P / s：如果您知道其他解决方案 - 请随时发表评论。我将不胜感激。

    • 0

相关问题