...

Page1.qml

@@ -4,6 +4,7 @@ import "./SepantaUiKit/SKBtn"
 import "./SepantaUiKit/SKBtnIcon"
 import "./SepantaUiKit/SKMultiOption"
 import "./SepantaUiKit/aCommon"
+import "./SepantaUiKit/SKDropDown"
 
 Item {
     anchors.fill: parent
@@ -41,7 +42,14 @@ Item {
         }
 
         Row {
+            spacing: 20
             SKMultiOption {}
+
+            SKDropDown {
+
+            }
+
+
         }
     }
 }

SepantaUiKit/SKDropDown/SKDropDown.qml

@@ -1,5 +1,108 @@
 import QtQuick 2.13
+import QtQml 2.13
+import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.13
+
+import "../"
+import "../aCommon"
 
 Item {
+    id: root
+    height: 38
+    width: 400
+
+    property var listOfObj: []
+    property var options: ["High", "Low", "Medium"]
+    property var currentText: options[currentIndex]
+    property int currentIndex: 0
+
+    property var stateOfComponent: Setting.Enable
+
+    Rectangle {
+
+        id: idBackGround
+        anchors.fill: parent
+        radius: Setting.mediumRadius
+        color: "transparent"
+        border.color: Colors.tertiaryEnable
+        border.width: 1
+        clip: true
+
+        Text {
+            leftPadding: 10
+            anchors.fill: parent
+            text: currentText
+            font: Fonts.h5
+            color: Colors.tertiaryEnable
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignVCenter
+        }
+
+        UImage {
+            width: 16
+            height: 16
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.verticalCenter: parent.verticalCenter
+            color: Colors.tertiaryEnable
+            source: "qrc:/SepantaUiKit/icons/downArrow.svg"
+        }
+        MouseArea {
+            anchors.fill: parent
+            onPressed: {
+
+                idPopup.open()
+            }
+        }
+    }
+
+    Popup {
+        id: idPopup
+        width: parent.width
+        height: 500
+        y: 0
+        contentItem: ListView {
+            implicitHeight: idBackGround.height
+            model: options
+        }
+
+        background: Rectangle {
+            radius: Setting.mediumRadius
+            color: "transparent"
+            border.color: Colors.tertiaryEnable
+            border.width: 1
+            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
+    //         }
+    //     }
 
+    // }
 }

SepantaUiKit/aCommon/UImage.qml

@@ -4,6 +4,12 @@ import QtGraphicalEffects 1.13
 Item {
     property alias color: idOverlay.color
     property alias source: idImage.source
+
+    ColorOverlay {
+        id: idOverlay
+        anchors.fill: parent
+        source: idImage
+    }
     Image {
         id: idImage
         visible: false
@@ -11,9 +17,4 @@ Item {
         sourceSize.width: width
         sourceSize.height: height
     }
-    ColorOverlay {
-        id: idOverlay
-        anchors.fill: parent
-        source: idImage
-    }
 }