如何定制离子切换形式圆形到矩形

Question

我是离子新手，我需要像这样自定义ion-toggle。

但我不知道如何改变这个。

有人可以帮助我吗？

谢谢！

修改

感谢@LeftyX的自定义风格。

我已使用this stackoverflow link为离线切换添加文字

Answer 1

您必须更改一些right规则 您在那里有2个元素：css和.toggle .track。

下面你会发现一些会改变边框半径，宽度和动画的css。 .toggle .handle会在手柄上添加一个ionicon。

.toggle .handle:before

向.toggle .track { border-radius: 6px !important; width: 70px; } .toggle .handle { border-radius: 6px !important; width: 32px !important; height: 32px !important; top: 4px !important; } .toggle .handle:before { font-family: "Ionicons"; content: "\f13f" !important; top: -11px !important; left: -21.5px !important; } .toggle input:checked + .track .handle { -webkit-transform: translate3d(28px, 0, 0); transform: translate3d(28px, 0, 0); } 添加标签SI和NO并不容易，我想这需要制定指令。

无论如何，这是最终结果：

和CodePen。