NeuMorphSwitchForm.ui.qml

import QtQuick 2.12
import InfotainmentDemo 1.0

NeumorphPanel {
    id: component
    width: 120
    height: 50
    property alias mouseArea: mouseArea
    property alias anim: anim

    Rectangle {
        id: rectangle
        y: 16
        height: 16
        color: "#c79696"
        radius: 8
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 24
        anchors.left: parent.left
        anchors.leftMargin: 24
    }

    NeumorphRoundButton {
        id: neumorphRoundButton
        x: 16
        y: 8
        width: 38
        height: 38
        anchors.verticalCenter: parent.verticalCenter

        MouseArea {
            id: mouseArea
            anchors.fill: parent
        }

        Rectangle {
            id: rectangle1
            width: 40
            height: 40
            color: "#00000000"
            radius: 19
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            border.width: 2
            border.color: "#ffffff"
        }
    }

    ParallelAnimation {
        id: anim

        NumberAnimation {
            id: numberAnimation
            target: neumorphRoundButton
            property: "x"
            duration: 250
            easing.bezierCurve: [0.68,-0.55,0.265,1.55,1,1]
        }

        ColorAnimation {
            id: colorAnimation
            target: rectangle
            property: "color"
        }


    }
    states: [
        State {
            name: "Off"
        },
        State {
            name: "On"

            PropertyChanges {
                target: neumorphRoundButton
                x: 70
            }

            PropertyChanges {
                target: rectangle
                color: "#6cff55"
            }
        }
    ]
}

/*##^##
Designer {
    D{i:0;formeditorColor:"#4c4e50";formeditorZoom:0.8999999761581421}D{i:1;anchors_width:104;anchors_x:8}
D{i:4;anchors_height:200;anchors_width:200}
}
##^##*/