ComboBox: add custom popup example snippet

Change-Id: I9e393d3db42ba21ee2e1cd231bb91fd55bcace46
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

1 files changed, 30 insertions, 3 deletions

diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml
index d4b0b194..bd261e52 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-combobox-custom.qml
@@ -35,12 +35,18 @@ ComboBox {
 
     delegate: ItemDelegate {
         width: control.width
-        text: modelData
-        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        contentItem: Text {
+            text: modelData
+            color: "#21be2b"
+            font: control.font
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
         highlighted: control.highlightedIndex == index
     }
 
     indicator: Canvas {
+        id: canvas
         x: control.width - width - control.rightPadding
         y: control.topPadding + (control.availableHeight - height) / 2
         width: 12
@@ -49,7 +55,7 @@ ComboBox {
 
         Connections {
             target: control
-            onPressedChanged: indicator.requestPaint()
+            onPressedChanged: canvas.requestPaint()
         }
 
         onPaint: {
@@ -82,5 +88,26 @@ ComboBox {
         border.width: control.visualFocus ? 2 : 1
         radius: 2
     }
+
+    popup: Popup {
+        y: control.height - 1
+        width: control.width
+        implicitHeight: listview.contentHeight
+        padding: 1
+
+        contentItem: ListView {
+            id: listview
+            clip: true
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            border.color: "#21be2b"
+            radius: 2
+        }
+    }
 }
 //! [file]