i'm new in ionic and i need to customize ion-toggle
like this.
but i don't know how to change from this.
Could anyone help me?
Thanks!
EDIT
Thanks to @LeftyX for the custom style.
I've used this stackoverflow link for add text to ion-toggle
You must change a few css
rules.
You've got 2 elements there: .toggle .track
and .toggle .handle
.
Below you will find some css which will change the border radius, width and animation. .toggle .handle:before
will add a ionicon to the handle.
.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);
}
Adding labels SI
and NO
to your ion-toggle
won't be that easy and I guess it would require building a directive.
Anyway, this is the final result:
and the CodePen .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.