Add DropDown

Page1.qml

@@ -45,11 +45,19 @@ Item {
             spacing: 20
             SKMultiOption {}
 
-            SKDropDown {
-
-            }
-
-
+            SKDropDown {}
         }
     }
+    ListView {
+        y: 300
+        x: 300
+        width: 400
+        height: 400
+        model: ["A", "b", "c"]
+        delegate: Text {
+            text: "Hi"
+            color: "white"
+        }
+
+    }
 }

SepantaUiKit/SKDropDown/SKDropDown.qml

@@ -14,7 +14,7 @@ Item {
     property var listOfObj: []
     property var options: ["High", "Low", "Medium"]
     property var currentText: options[currentIndex]
-    property int currentIndex: 0
+    property int currentIndex: idContentItem.currentIndex
 
     property var stateOfComponent: Setting.Enable
 
@@ -50,8 +50,10 @@ Item {
         MouseArea {
             anchors.fill: parent
             onPressed: {
-
-                idPopup.open()
+                if (idPopup.visible)
+                    idPopup.close()
+                else
+                    idPopup.open()
             }
         }
     }
@@ -59,14 +61,42 @@ Item {
     Popup {
         id: idPopup
         width: parent.width
-        height: 500
-        y: 0
+        y: idBackGround.height
+        implicitHeight: contentItem.implicitHeight
+        padding: 0
+        visible: true
+        onVisibleChanged: console.log("Visible: " + visible)
+        closePolicy: Popup.CloseOnPressOutsideParent
         contentItem: ListView {
-            implicitHeight: idBackGround.height
+            id: idContentItem
+            implicitHeight: contentHeight
+            width: parent.width
             model: options
+            currentIndex: 0
+            delegate: Item {
+                id: idDelegate
+                width: parent.width
+                height: idBackGround.height
+                Text {
+                    leftPadding: 10
+                    anchors.fill: parent
+                    text: modelData
+                    font: Fonts.h5
+                    color: Colors.tertiaryEnable
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignVCenter
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        currentIndex = index
+                        idPopup.close()
+                    }
+                }
+            }
         }
-
         background: Rectangle {
+            anchors.fill: parent
             radius: Setting.mediumRadius
             color: "transparent"
             border.color: Colors.tertiaryEnable
@@ -74,35 +104,4 @@ Item {
             clip: true
         }
     }
-
-    // ComboBox {
-    //     id: control
-    //     anchors.fill: parent
-    //     model: options
-    //     font: Fonts.h5
-
-    //     popup: Popup {
-    //         y: control.height - 1
-    //         width: control.width
-    //         implicitHeight: contentItem.implicitHeight
-    //         padding: 1
-
-    //         contentItem: ListView {
-    //             clip: true
-    //             implicitHeight: contentHeight
-    //             model: control.popup.visible ? control.delegateModel : null
-    //             currentIndex: control.highlightedIndex
-    //         }
-
-    //         background: Rectangle {
-    //             anchors.fill: parent
-    //             radius: Setting.mediumRadius
-    //             color: "transparent"
-    //             border.color: Colors.tertiaryEnable
-    //             border.width: 1
-    //             clip: true
-    //         }
-    //     }
-
-    // }
 }