Ionic 3 Ion-toggle手柄图标[关闭]

Question

如何在手柄上显示离子图标：

我找不到通过css访问句柄的方法。

谢谢

Answer 1

你可以用CSS做到这一点。无需编写自定义控件。

我添加了一个类rainy-toggle，然后添加了以下CSS。我在下面的base64中使用了SVG，但您可以根据自己的选择添加图像。

因为'原生'Android切换看起来不同，我只是覆盖toggle-md的样式，用iOS CSS替换你的多雨切换。换句话说，您必须修改所有切换样式以在Android设备上覆盖它们。

CSS：

.toggle-ios.toggle-checked.rainy-toggle .toggle-inner {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…IgZGF0YS1vbGRfY29sb3I9IiMwMDg5RkYiPjwvcGF0aD4KCTwvZz4KPC9nPjwvZz4gPC9zdmc+);
    background-repeat: no-repeat;
    background-size: 80%;
    background-color: white;
    background-position: center;
}

.toggle-ios.toggle-checked.rainy-toggle .toggle-icon {
    background-color: #0082FF;
}