diff --git a/Page1.qml b/Page1.qml index b21f0f8..3e9b08c 100644 --- a/Page1.qml +++ b/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" + } + + } } diff --git a/SepantaUiKit/SKDropDown/SKDropDown.qml b/SepantaUiKit/SKDropDown/SKDropDown.qml index 31e804a..0156913 100644 --- a/SepantaUiKit/SKDropDown/SKDropDown.qml +++ b/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 - // } - // } - - // } }