import QtQuick 2.9
import QtQuick.Controls 2.3
SwitchDelegate {
id: control
implicitHeight: 50
implicitWidth: 100
baselineOffset: 100
contentItem: Text {
visible: false
}
Text {
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
right: indicator.left
leftMargin: control.width * 0.02
text: control.text
color: appTheme.style.textColor
fontSizeMode: Text.Fit
font.pixelSize: control.height * 0.4
indicator: Rectangle {
property bool checked: parent.checked
property bool down: parent.down
height: parent.height * 0.6
width: height * 1.84
right: parent.right
rightMargin: control.width * 0.02
radius: height * 0.5
color: parent.checked ? "#17a81a" : "transparent"
border.color: parent.checked ? "#17a81a" : "#cccccc"
Behavior on color{
ColorAnimation{
duration: 200
Rectangle {
x: parent.checked ? parent.width - width : 0
width: parent.height
height: parent.height
color: parent.down ? "#cccccc" : "#ffffff"
border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999"
Behavior on x{
NumberAnimation {
property: "x"
easing.type: Easing.InOutQuad
background: Rectangle {
opacity: enabled ? 1 : 0.3
color: control.down ? appTheme.style.delegatePressedColor : appTheme.style.delegateBackgroundColor
radius: height * 0.3
Behavior on color {
ColorAnimation {